.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  
  border-right: 0px solid transparent;
  border-image-outset: 10px;
}

.sidenav > button {
  padding: 8px 8px 8px 32px;
  background-color: transparent;
  border: none;
  
  text-decoration: none;
  font-size: 40px;
  font-family: Nouveau;
  
  display: block;
  transition: 0.3s;
}

.sidenav > button:hover {
  color: #f1f1f1;
  cursor: url('https://soul-of-foxglove.neocities.org/-CSS/Cursors/pointhand.png'), default;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  background-color: transparent;
  border: none;
  
  text-decoration: none;
  font-size: 40px;
  font-family: Nouveau;
  
  display: block;
  transition: 0.3s;
}


.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.span1 {
  margin: auto 0;
  cursor:url('https://soul-of-foxglove.neocities.org/-CSS/Cursors/pointhand.png'), default;
  text-decoration:none;
}

#navbutton {
  background-image: url('https://soul-of-foxglove.neocities.org/images/sidebar.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width:100px;height:100px;
}

#homebutton {
  background-image: url('https://soul-of-foxglove.neocities.org/images/-BUTTONS/Home1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width:50px;height:50px; 
}


* {box-sizing: border-box;-webkit-appearance: none;}
      @font-face {font-family: 'Nouveau';src: url(https://soul-of-foxglove.neocities.org/-CSS/fonts/Nouveau-Regular.otf);}
      html, body {cursor: url('https://soul-of-foxglove.neocities.org/-CSS/Cursors/pointnormalhand.png'), default;font-family: Nouveau;color: var(--textcolor);}
      p {font-size: 30px;}
      h1 {font-size: 15vh;margin:0 auto;z-index:5;line-height:18vh;}
      h2 {font-size: 40px;}
      ul {font-size: 30px;list-style-image: url('https://i.postimg.cc/FRTqHJH9/Screenshot-2025-06-19-003751.png');}
      a {color:var(--darkertext);}
      a:hover, button:hover {cursor: url('https://soul-of-foxglove.neocities.org/-CSS/Cursors/pointhand.png'), default;color:var(--lightertext);}
      
      .button-hold {
        position:absolute;top:0;
        z-index: 7;
        min-height: 18vh;
        max-height: 18vh;
        display: flex;
        align-content: flex-start;
        justify-content: right;
        color: var(--darkertext);
      }
      .button-hold > button {
        margin-top:0;
        height: 50px;
        aspect-ratio: 1 / 1;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-color:transparent;border:none;
      }
      .button-hold > p {
        position:absolute;bottom:-10px;
      }
      #button-holdleft {
        left:0;
        justify-content: left;
      }
      #button-holdright {
        left:70%;right:0;
      }
      #forestbutton {
        background-image: url('/Images/Themes/foresttheme.png');
      }
      #forestbutton:hover {
        background-image: url('/Images/Themes/foresttheme2.png');
      }
      #pinkbutton {
        background-image: url('/Images/Themes/pinktheme.png');
      }
      #pinkbutton:hover {
        background-image: url('/Images/Themes/pinktheme2.png');
      }
      #navbutton {background-image: var(--button);}
      #navbutton:hover {background-image: var(--buttonhov);}
      #homebutton {background-image: var(--buttonhome);margin-top:15%;}
      #homebutton:hover {background-image: var(--buttonhomehov);}
      #bookbutton {
        width: 100%;
        background-image: url('/Images/-BUTTONS/closedbook.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 0;
      }
      #bookbutton:hover {
        background-image: url('/Images/-BUTTONS/openbook.png');
        cursor: url('/-CSS/Cursors/pointhand.png'), default;
      }
      
      
      
      
      :root {
        --basecolor: rgb(53, 81, 56);
        --textcolor: rgb(197, 209, 205);
        --lightertext: rgb(117, 229, 225);
        --darkertext: rgb(17, 31, 26);
        --headerimg: url('https://soul-of-foxglove.neocities.org/Images/Themes/headerimage.png');
        --border: 10px double rgb(17, 31, 26);
        
        --sidenavborderimg: url("/Images/frames/greenframe.png") 70 round;
        --button: url("https://soul-of-foxglove.neocities.org/Images/-BUTTONS/Navbutton1.png");
        --buttonhov: url("https://soul-of-foxglove.neocities.org/Images/-BUTTONS/Navbutton1b.png");
        --buttonhome: url("https://soul-of-foxglove.neocities.org/Images/-BUTTONS/Home1.png");
        --buttonhomehov: url("https://soul-of-foxglove.neocities.org/Images/-BUTTONS/Home1b.png");
        
        
        --background: url('/Further-Pages/zotherimgs/clearing.png');
        --backgroundsize: cover;
        --backgroundrep: no-repeat;
      }
      
      .page {
        position: absolute;
        top:0;left:0;
        width:100%;height:auto;
        z-index:1;
        background-image: var(--background);
        background-size: var(--backgroundsize);
        background-repeat: var(--backgroundrep);
      }
      
      .sidenav {
        background-color: var(--basecolor);
        border-image: var(--sidenavborderimg);
      }
      .sidenav > button {
        color: var(--textcolor);
      }
      
      .header {
        box-sizing: content-box;
        display: flex;
        z-index:5;
        left: 0;
        top: 0;
        width: 100%;
        min-height: 18vh;
        max-height: 18vh;
        
        background-image: var(--headerimg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom: var(--border);
        color: var(--darkertext);
      }
      .leftcolumn {   
        float: left;
        width: 40%;
      }
      .rightcolumn {
        float: right;
        width: 60%;
        padding-left: 20px;
      }
      .card {
         padding: 10px;
         margin-top: 20px;
         background-color: var(--basecolor);
         border: var(--border);
         background: url('https://soul-of-foxglove.neocities.org/Further-Pages/zotherimgs/card.png');
         background-size: cover;
      }
      .row {
        width:100%;
        margin:0;
        padding: 10px;
      }
      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
        margin: 15px;
      }
      .footer {
        text-align: center;
        padding: 1vw;
        display: flex;
        left: 0;
        bottom: 0;
        background-color: var(--basecolor);
        border: var(--border);
      }
      
      #inspoimg img {
        border: 3px solid transparent;
      }
      #inspoimg img:hover {
        border: 3px solid var(--lightertext);
      }
      
      
      
      @media screen and (max-width: 600px) {
        .leftcolumn, .rightcolumn {
          float: none;
          width: 100%;
          padding:0;
        }
        
        .button-hold {
          flex-wrap: wrap;
          width: 20%;
        }
        #button-holdright { left:80%; right:0;}
        
        .button-hold > p {
          position: relative;
          font-size: 25px;
          margin: 0;
        }
        
        .button-hold > button {
          height:30px;
        }
        #navbutton {
          height: 60px; width: 60px;
        }
        
        #homebutton {
          height: 30px; width: 30px;margin-top:0;margin-left:15%;
        }
        
        .row {
          padding:20px;
        }
        
        .footer > img {
          width: 35%;
        }
        .footer {
          flex-wrap: wrap;
        }
      }