:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
  --mainbodyborders: lightblue;
}



    @font-face {
  font-family: Onli;
  src: url("https://fonts.cdnfonts.com/s/19946/OnliLight.woff");
}


.noto-serif {
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
}


.comic-neue-light {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: normal;
}

.comic-neue-regular {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-bold {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: normal;
}

.comic-neue-light-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: italic;
}

.comic-neue-regular-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: italic;
}

.comic-neue-bold-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: italic;
}


.nav {
  width:79.5%;
  max-width:1100px;
  margin:auto;
  height:65px;
  display:Flex;
  justify-content: center; /* Horizontal centering */
  align-items:center;
  background:url(https://i.pinimg.com/originals/03/c2/ff/03c2ff2e06cd871731d8e96fd1113b34.gif);
  background-size:400px auto;
  border-color: var(--mainbodyborders);
border-width:3px;
border-style:none solid solid solid;
 }  
 
  @media only screen and (max-width: 600px) {
.nav {
    width:100%;
  height:120px;
  border-style:solid solid none solid;
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  }
}


.button {
  width:95%;
  font-size:20px;
  height:45px;
  background:white;
    margin-left:0px;
  margin-right:25px;
  border-color: var(--mainbodyborders);
border-width:3px;
border-radius:26px;
border-style:solid;
 }  
 
  @media only screen and (max-width: 600px) {
.button {
    width:100%;
    font-size:20px;
  height:40px;
   margin-left:2px;
  margin-right:2px;
  border-color: var(--mainbodyborders);
border-width:3px;
border-radius:0px;
border-style:solid;
padding:7px;
  }
}

    body {
      background:url(https://file.garden/Z8FBw7OPQBp0VF4E/just%20sayori/background.gif);
      background-size:180px auto;
      background-repeat:repeat;
      background-attachment:fixed;
      font-family: Onli;
      width:100vw;
      height:100vh;
      margin:auto;
      overflow-x:hidden;
     overflow-y:auto;
     margin-top:30px;
     margin-bottom:5%;
      animation: magical 0.1s linear infinite;
      }
      
@keyframes magical{
    0% { 
        cursor: url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/cursor2.webp), auto;
    }
    50% { 
        cursor: url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/cursor2.webp), auto;
    }
    100% { 
        cursor: url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/cursor2.webp), auto;
    }
}
      
      .header {
        background:url(https://file.garden/Z8FBw7OPQBp0VF4E/meow%20meow/My_Place_To_Come_Back_To_T.jpeg);
        background-size:100% auto;
        border-radius:30px 30px 0px 0px;
        background-position:center;
        width:79.5%;
        max-width:1100px;
        height:300px;
        margin:auto;
        border-color: var(--mainbodyborders);
        border-width:3px;
        border-style:solid;
          position: relative;
          transform: scaleX(1);
}

    
          @media only screen and (max-width: 600px) {
      .header {
        width:98.8%;
        height:180px;
        background-size:140% auto;
        border-style:solid solid none solid;
        text-align: right;
        }
    }
    
          .headertxt {
        margin:auto;
        
        font-size:65px;
        color:black;
        position: absolute;
  bottom: 0px;
  right: 15px;
  font-weight: bold;
        }

    
          @media only screen and (max-width: 600px) {
      .headertxt {
font-size:35px;
text-align:center;
        }
    }
    
    
    
      
  .div {
    background:pink; 
    width:80%;
    max-width:1106px;
    height:fit;
    margin:auto;
    padding:0px;
     display: flex;
     overflow-x:hidden;
     overflow-y:auto;
    }
        
        @media only screen and (max-width: 600px) {
  .div {
    background-color: lightblue;
    display:block;
    width:100%;
    height:fit;
  }
}

.little {
     margin:0px;
background:white;
border-color: var(--mainbodyborders);
border-width:3px;
border-style:none solid solid none;
width:100%;
height:fit;
word-break:break-word;
padding:7px;
overflow-x:hidden;
overflow-y:auto;
  }
  
          @media only screen and (max-width: 700px) {

  .little {
background:white;
border-color: var(--mainbodyborders);
width:96%;
border-width:3px;
border-style:none solid none solid;
word-break:break-word;
padding:7px;
  }
}


   .img {
     height:auto;
     width:50%;
    }
 }

 @media only screen and (max-width: 600px) {
   
   .img {
     height:auto;
     width:50%;
    }
 }
 
 
 
 .centerlittle {
     margin:0px;
background:white;
border-color: var(--mainbodyborders);
border-width:3px;
border-style:none none solid none;
width:270%;
height:fit;
word-break:break-word;
padding:7px;
overflow-x:hidden;
overflow-y:auto;
  }
  
          @media only screen and (max-width: 700px) {

  .centerlittle {
background:white;
border-color: var(--mainbodyborders);
border-width:3px;
width:96%;
height:fit;
border-style:solid;
word-break:break-word;
word-break:break-word;
padding:7px;
  }
}



      .footer {
        background:white;
        background-size:100% auto;
        background-position:top;
        width:79.5%;
        max-width:1100px;
        height:60px;
        margin:auto;
        border-color: var(--mainbodyborders);
        border-width:3px;
        border-style:none solid solid solid;
        border-radius:0px 0px 30px 30px;
        }

    
          @media only screen and (max-width: 600px) {
      .footer {
        width:98.8%;
        height:50px;
        border-style:solid;
        }
    }
    
    
    .boxmeow {
      width:100%;
      height:fit;
      background:url(https://file.garden/Z8FBw7OPQBp0VF4E/meow%20meow/hearts.gif);
      display:Flex;
      justify-content: center; /* Horizontal centering */
      align-items:center;
      margin-bottom:4px;
      padding:0px;
      overflow-x:hidden;
      overflow-y:auto;
      }
      
          .meowmeow {
      width:94%;
      height:fit;
      background:url(https://file.garden/Z8FBw7OPQBp0VF4E/meow%20meow/hearts.gif);
      margin-bottom:4px;
      padding:0px;
      overflow:hidden;
      border-color: pink;
      border-width:3px;
      border-style:solid;
      border-radius:7px;
      }

          @media only screen and (max-width: 600px) {
          .meowmeow {
      width:74%;
      height:fit;
      background:url(https://file.garden/Z8FBw7OPQBp0VF4E/meow%20meow/hearts.gif);
      margin-bottom:4px;
      margin:auto;
      padding:0px;
      overflow:hidden;
      border-color: pink;
      border-width:3px;
      border-style:solid;
      border-radius:7px;
      }
  }

    
    h2 {
      background:hotpink;
      color:white;
      width:94.7%;
      height:fit;
      font-size:100%;
      margin-bottom:3px;
      margin:0px;
      padding:3px;
      border-width:2;
      border-radius:7px 7px 0px 0px;
      border-color:white;
      border-style:solid;
      }
    
    
        .today {
        background-color: rgba(255, 105, 180, 0.5);
        font-weight: bold;
    }
  .muted{ 
    color:hotpink;
  }
  
  .tableca {
    background-image: url(https://file.garden/Z8FBw7OPQBp0VF4E/meow%20meow/ruffles.jpg);
    background:;
    background-size:100% auto;
    width: 200px;
    height: 230px;
    text-align: center;
    table-layout: fixed;
    border: 1px solid #ffa9d5;
    padding: 5px;
    margin:0px;
    color: #f700a1;
}