html {
        height: 100%;
        width: 100%;
        cursor: url(https://file.garden/aej4MdvojSCYQ7Xh/cursor.cur), auto;
    }
    
    .sticker-sheet {
      position: relative;
      }
    
    .intro_holder {
       display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    max-height:70vh;
    min-height:70vh;
      }
    
    .Intro {
 flex-basis: 100%;
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
  background-size: cover;
      text-align: center;
    padding: 5px;
    margin: 10px;
    overflow: hidden;
    overflow-wrap: break-word;
     overflow-y: scroll;
    max-height:60vh;
    min-height:60vh;
    max-width: 70vh;
    min-width: 70vh;
    margin-top:70px;
    }
    
    .top_intro {
 display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
     gap: 3px;
     
     }
    
    .Intro-contents {
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
  background-size: cover;
      text-align: center;
    padding: 5px;
    margin: 10px;
    overflow: hidden;
    overflow-wrap: break-word;
     overflow-y: scroll;
    max-height:50vh;
    min-height:50vh;
    max-width: 60vh;
    min-width: 60vh;
    margin-top:10px;
    margin-left: 4vh;
    
}
    

.left {
  flex-basis: 10%;
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
  background-size: cover;
      text-align: center;
    padding: 5px;
    margin: 10px;
    overflow: hidden;
    overflow-wrap: break-word;
     overflow-y: scroll;
    max-width: 15%;
    max-height: 20%;
    margin-left: 100px;
    
}

.top_left {
  display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
     gap: 3px;
     
}

.mid_left {
  display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
     gap: 3px;
  }

.center {
  flex-basis:80%;
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    text-align: center;
    flex: 3 0 200px;
    padding: 30px;
    margin: 10px;
    width: 100%;
      overflow-y: scroll;
}

.top-center{
  display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
     gap: 3px;
     margin-top:-25px;
  }
  
  .pages{
 background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
  padding: 20px;
  gap: 3px;
  margin-top:10px;
   overflow-y: scroll;
    }

.right {
  flex-basis: 10%;
  background-size: cover;
      text-align: center;
    padding: 5px;
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
    margin: 10px;
    overflow: hidden;
    overflow-wrap: break-word;
     overflow-y: scroll;
    max-width: 15%;
    max height: 20%;
    margin-right: 100px;
    
    
}

.top_right{
   display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
     gap: 3px; 
}

.book{
  
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
  Margin-top: 5px;
  padding: 5px;
  }
  
  .mid_right{
   display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
     gap: 3px; 
      Margin-top: 10px;
}

body {
  min-height: 100vh;
  background-image: url(https://file.garden/aej4MdvojSCYQ7Xh/Bgwithstars.png);
  background-repeat: repeat;
  background-size: 20%;
  background-position: center;
   color: antiquewhite;
   text-shadow: 2px 2px 3px #14064D;
   text-align: center;
   font-family: 'Illusion';
   font-size: 50%;

}

.footer {
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
    background-repeat: no-repeat;
  background-size: cover;
    margin: 10px 50px;
      align-content: center;
    text-align: center;
    padding: 3px;
   margin-left: 100px;
  margin-right:100px;
}

.header {
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
    background-position: center;
    background-size: 100%;
    align-content: center;
    text-align: center;
    padding: 2px;
  size: 1704px 200px;
  margin-top: 50px;
  margin-left: 100px;
  margin-right:100px;
  margin-bottom: 10px;
} 
    .directorybuttons {
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
        align-content: center;
        text-align: center;
        padding: 5px;
     margin-left: 100px;
  margin-right:100px;
  margin-top: 10px;
  margin-bottom: 10px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    background-size: 100%;
    }
    
.container {
  display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    max-height:70vh;
    min-height:70vh;
}

.thebook {
 
  width: 60%;
  height: 60%;
   cursor: url(https://file.garden/aej4MdvojSCYQ7Xh/cursor-hoverclick.cur), auto;
}

.page_buttons{
  cursor: url(https://file.garden/aej4MdvojSCYQ7Xh/cursor-hoverclick.cur), auto;
  background-color: transparent;
   color: antiquewhite;
    text-shadow: 2px 2px 3px #14064D;
      font-family: 'Illusion';
src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
 font-size: 100%;
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 10px;
  border-height:80%;
  }
  
  /*YES THIS IS REDUNDANT NO IT DOESN'T WORK IF I TAKE IT OUT*/
  
  .page_buttonshome_page{
  cursor: url(https://file.garden/aej4MdvojSCYQ7Xh/cursor-hoverclick.cur), auto;
  background-color: transparent;
   color: antiquewhite;
    text-shadow: 2px 2px 3px #14064D;
   font-family: 'Illusion';
src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
 font-size: 100%;
      background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 10px;
  border-height:80%;
  }
  
  .fbutton{
background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 10px;
  width: 15px;
  height: 17px;
  font-size: 7px;
    padding: 1px;
    }
    
    .Status{
      margin-right:5px;
      margin-top:-4px;
      }
  
  .guestbook{
    margin-right:5px;
      margin-top:-4px;
    }
    
    .centertext{
     margin-right:5px;
      margin-top:-4px;
    }
  .LinkButton {
    margin-right:5px;
      margin-top:-4px;
    }
    
    .mp3{
      margin-right:5px;
      margin-top:-4px;
      }
  
  #statuscafe {
    padding: .5em;
    background-color: transparent;
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 25px;
}
#statuscafe-username {
    margin-bottom: .5em;
    cursor: url(https://file.garden/aej4MdvojSCYQ7Xh/cursor-hoverclick.cur), auto;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}


/*Multiple music player from Adilene.net, source code from https://github.com/sayantanm19/js-music-player*/
/*music player is in mid-left section*/
#musicplayer{
    font-family: 'Illusion';
src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Regular.woff2) format('woff2');
   background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
    border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 10px;
    width:85%; /* width of the player - make it 100% if you want it to fill your container */
    padding:10px;
    text-align:center; 
    display:flex;
    flex-direction:column;
    gap:10px;
    color: antiquewhite;
    text-shadow: 2px 2px 3px #14064D;
   
}

.songtitle, .track-info, .now-playing{
    padding:5px;
}

.controls{
    display:flex; 
    flex-direction:column; 
}

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
  
}

.buttons div{
    width:33.3%;
}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;

}

.now-playing, .track-info{
     background: #dab9fa;
background: linear-gradient(0deg, rgba(218, 185, 250, 1) 0%, rgba(84, 29, 173, 1) 15%, rgba(26, 7, 94, 1) 35%, rgba(20, 6, 77, 1) 50%, rgba(26, 7, 94, 1) 65%, rgba(84, 29, 173, 1) 85%, rgba(218, 185, 250, 1) 100%);
border: 2px solid #E1F6FC;
   box-shadow: 0 0 5px #E1F6FC;
  border-radius: 10px;
}

.now-playing{
    font-weight:bold;
}

.material-icons{
    color:antiquewhite !important;
    text-shadow: 2px 2px 3px #14064D;
}

input[type=range]{
    -webkit-appearance:none; /* removes default appearance of the tracks */
    appearance:none;
    width:100%;
    background-color:inherit;
}

input[type=range]:focus{
    outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    color:antiquewhite;
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    color: antiquewhite;
    -webkit-appearance:none;
    margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    color: antiquewhite;
}

input[type=range]::-moz-range-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0; /* change to 5px if you want a circle seeker */
    color: antiquewhite;
    text-shadow: 2px 2px 3px #14064D;
    border:none; /* removes weird border around seeker square in firefox */
}

/* Decorative aka 'stickers' images go here */
  
  .stickertopleft {
    float: left;
  position: absolute;
  left: 75px;
  top: 15px;
    }
    
    .stickertopright {
      float: right;
  position: absolute;
  right: 75px;
  top: 15px;
      }
      
      .stickerbottomright {
           float: right;
 position: absolute;
  right: 80px;
 bottom:0.1px;
        }
        
        .stickerbottomleft {
           float: left;
  position: absolute;
  left: 80px;
bottom:0.1px;
        }
    
@font-face {                  
font-family: 'Illusion';
src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}