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

  .text {
    background-image: url("https://file.garden/Z8FBw7OPQBp0VF4E/thestar/starrry.gif");
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }



.text2{
     transition: 0.6s;
   }
   
.text2:hover{
  letter-spacing: 3px;
}


  .musicplayer {
    display:block;
    }   
    
    
      @media (max-width: 600px) {

  .musicplayer {
    display:none;
    }
  }
        


    @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;
}

.metamorphous-regular {
  font-family: "Metamorphous", serif;
  font-weight: 700;
  font-style: bold;
}



.nav {
  width:79.5%;
  max-width:1100px;
  margin:auto;
  height:fit;
  display:Flex;
  justify-content: center; /* Horizontal centering */
  align-items:center;
  background:darkslateblue;
  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:174.2px;
  font-size:20px;
  height:60px;
  color:white;
    background-image: linear-gradient(to right, darkslateblue, darkslateblue, darkslateblue);
    margin-left:0px;
  margin-right:0px;
  border-color: var(--mainbodyborders);
border-width:3px;
border-radius:0px;
border-style:none;
transition:  0.7s ease-in-out;
font-family: "Metamorphous", serif;
 }  
 
 .button:hover {
  width:174.2px;
  font-size:20px;
  height:60px;
  background-image: linear-gradient(to right, darkslateblue, cornflowerblue, darkslateblue);
  font-family: "Metamorphous", serif;
 }  
 
  @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;
background-image: linear-gradient(to right, darkslateblue, darkslateblue, darkslateblue);
  }
  
   .button:hover {
  width:100%;
  font-size:20px;
  height:40px;
  background-image: linear-gradient(to right, darkslateblue, cornflowerblue, darkslateblue);
  font-family: "Metamorphous", serif;
 } 
  
}

    body {
      background:url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/pao10q0ys4rf1.png);
      background-size:auto 100%;
      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 4s ease-in-out infinite;
      }
      
@keyframes magical{
    0% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_1_delay-0.5s.png), auto;
    }
    10% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_2_delay-0.5s.png), auto;
    }
    20% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_3_delay-0.5s.png), auto;
    }
    30% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_4_delay-0.5s.png), auto;
    }
    40% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_4_delay-0.5s.png), auto;
    }
    50% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_4_delay-0.5s.png), auto;
    }
    60% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_4_delay-0.5s.png), auto;
    }
    70% {
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_5_delay-0.5s.png), auto;
    }
    80% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_6_delay-0.5s.png), auto;
    }
    90% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_7_delay-0.5s.png), auto;
    }
    100% { 
        cursor: url(https://thestarbeyond.neocities.org/cursor/moonphase/frame_8_delay-0.5s.png), auto;
    }
}

    a {cursor: url("https://file.garden/Z8FBw7OPQBp0VF4E/thestar/pointer.webp"), pointer;}


      
      .header {
        background:url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/kuutar.jpg);
        background-size:100% auto;
        border-radius:30px 30px 0px 0px;
        background-position:center;
        width:79.5%;
        max-width:1100px;
        height:340px;
        margin:auto;
        border-color: var(--mainbodyborders);
        border-width:3px;
        border-style:solid;
          position: relative;
          transform: scaleX(1);
          transition:  2s ease-in-out;

}

      .header:hover {
        background-position:top;
        background:url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/moonangel.jpg);
        background-size:100% auto;
}

    
          @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:darkslateblue;
        position: absolute;
  bottom: 3px;
  right: 12px;
  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;
align-items:center;
justify-content:center;
  }
  
          @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:274%;
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/thestar/snowflake.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.4%;
      height:fit;
      background:url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/snowflakes.gif);
      margin-bottom:4px;
      padding:0px;
      overflow:hidden;
      border-color: cornflowerblue;
      border-width:1px;
      border-style:solid;
      border-radius:0px;
      }

          @media only screen and (max-width: 600px) {
          .meowmeow {
      width:30%;
      height:fit;
      background:url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/snowflake.gif);
      margin-bottom:4px;
      margin:auto;
      padding:0px;
      overflow:hidden;
      }
  }

    
    h2 {
      background:cornflowerblue;
      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(166, 185, 255, 0.5);
        font-weight: bold;
    }
  .muted{ 
    color:#91a9ff;
  }
  
  .tableca {
    background-image: url(https://file.garden/Z8FBw7OPQBp0VF4E/thestar/blueplaid.jpg);
    background-size:100% auto;
    width: 210px;
    height: 230px;
    text-align: center;
    table-layout: fixed;
    border: 1px solid cornflowerblue;
    padding: 5px;
    margin:0px;
    color: darkslateblue;
}
  


          .meowmeowmeow {
      width:fit;
      height:fit;
      background:white;
      margin-bottom:4px;
      padding-left:10px;
      padding-right:10px;
      overflow:hidden;
      border-color: cornflowerblue;
      border-width:1px;
      border-style:none solid none solid;
      border-radius:0px;
      }

          @media only screen and (max-width: 600px) {
          .meowmeowmeow {
      width:100%;
      height:fit;
      background:white;
      margin-bottom:4px;
      margin:auto;
      padding:0px;
      overflow:hidden;
      }
  }