::-webkit-scrollbar {
  width: 6px;
            
}

::-webkit-scrollbar-track {
  background-color: transparent;
    border: 1px dotted #FECBE0;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #FECBE0;
  border-radius: 8px;
}
        
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat996.cur), auto !important;} /* End https://www.cursors-4u.com */

        
           @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }
        
        .im-fell-english-sc-regular {
  font-family: "IM Fell English SC", serif;
  font-weight: 400;
  font-style: normal;
}

    
    
        
        a {
                color: #535353;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }
        
        a:hover{
             
            border-radius: 20px;
            font-weight:normal;
            text-decoration: underline overline;
            
        }
 ul {
                
                padding: 0;
                margin: 3px;
                list-style-type: none;
                
                font-size: smaller;
                margin-left: 10px;
                text-align: left;
     line-height: 25px;
           
        }
    
li::marker {
   content: "●";
  
   
          
}
        
 
        
        h1,
        h2,
        h3,
        h4,
        h5
        {
 
            color: #535353;
            text-decoration: overline underline;
            background-image: linear-gradient( to right, white, rgba(254, 203, 224, 0.67), white);
            border-radius: 0px;
                text-align:center;  
                line-height:18px;
                margin: 0;
               
}


  
    body {
        font-family: 'Nunito', sans-serif;
         color: #535353;
        background-color: #ddbfb9;
   }
        
       
        .grid-container {
                max-width: 900px;
                display: grid;
                justify-content:space-around;
                grid-template-columns: 1fr 1fr 1fr 1fr ;
                grid-template-rows: 1fr 1fr 1fr 1fr; /*Make the grid smaller than the container*/
                align-content: space-around;
                gap: 10px;
                width:920px;
                height:auto;
                margin: 0 auto;
                margin-top: 100px;
                float: left;
                background: transparent;
                background-clip: padding-box;
                background-attachment: fixed;
                padding:30px;
            
    
        
    
}
        
        
        
        .grid-container > div {
  background-color: transparent;
          background-image: url();
                background-repeat: no-repeat;
            background-clip: content-box;
            background-size: auto;
            background-position: right;
                text-align: left;
            height:auto;
            width: auto;
            border: 2px dashed #c1a387;
            
            
        }
  
        
            .navbar {
                grid-auto-flow: column;
      grid-area: 1 / 4 / 1 / 4 ;
                margin-top: 0px;
                padding: 10px ;
            font-weight: bold;
                color: #535353;
                
               
}
            .header {
      grid-area: 1 / 1 / 2 / 4 ;
                padding: 10px ;
              
                

    
}

.banner{
    
    background-color: transparent;
   
    margin-bottom: -5px;
    
}
 
      

.dividers

{
    background-color: #c1a387;
    height: 20px;
    width: auto;
    background-image: url(https://tender-days.nekoweb.org/resources/floaties/dividerbg.png);
        background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
     text-shadow: 1px 1px 2px #b9b3ad;
     font-family: "IM Fell English SC", serif;
  font-weight: 400;
  font-style: normal;
    color: #715840;
    text-align: center;
     text-shadow: 1px 1px 2px #a3978a;
    
    
}

.titlenav {
  position: relative;
    margin-top: -43px;
    width: 186px;
  background-color:#ddbfb9;
  color: #987c76;
    text-align: left;
   font-family: "IM Fell English SC", serif;
  font-weight: 400;
  font-style: normal;
            font-size:40px;
    
     text-shadow: 1px 1px 2px #a3978a;
    
    
}

.characters {
    
    
    padding: 0px;
    margin-top: -40px;
    
  
}




.charactersnames {
   top: 245px;
    left: 5px;
    position: relative;
   font-family: "IM Fell English SC", serif;
  font-weight: 400;
  font-style: normal;
    color: white;
            font-size:35px;

     text-shadow: 2px 2px 3px #000000;
    
}
    
        .row {
  display: flex;
  flex-wrap: wrap;
           grid-area: 1 / 1 / 7 / 8 ;
            
            
            
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
width: 100%;
  padding: 10px;
    
}

.column img {
    
  vertical-align: middle;
  width: 100%;
     border:solid 3px #FFF;
        margin: 0px;
    
        }