:root {
        --background: url('/Further-Pages/zotherimgs/clearing.png');
        --backgroundsize: cover;
        --backgroundrep: no-repeat;
        --buttonhome: url("https://soul-of-foxglove.neocities.org/Images/-BUTTONS/Home1.png");
        --buttonhomehov: url("https://soul-of-foxglove.neocities.org/Images/-BUTTONS/Home1b.png");
        
        --basecolor: var(--blueDark);
        --textcolor: var(--orangeLight);
        --lightertext: var(--greenLightest);
        --darkertext: var(--orangeDark);
        --headerimg: url('https://soul-of-foxglove.neocities.org/Images/Themes/headerimage.png');
        --border: 10px double var(--orangeDark);        
        
        --background: url('/Further-Pages/zotherimgs/clearing.png');
        --backgroundsize: cover;
        --backgroundrep: no-repeat;
        
        --orangeLight: rgb(218, 119, 20);
        --orangeDark: rgb(138, 75, 12);
        --blueLight: rgb(20, 119, 218);
        --blueDark: rgb(13, 76, 138);
        --greenLightest: rgb(203, 220, 200);
        --greenDarkest: rgb(19, 81, 7);
        
        --hheight: 15vh;
      }
      
      @font-face {
        font-family: 'w95fa';
        src: url(https://soul-of-foxglove.neocities.org/-CSS/fonts/w95fa.otf);
      }
      
      h2 {text-align:center;}
      
      a {color:rgb(197, 209, 205);}
      
      .header {
        min-height: var(--hheight);
        max-height: var(--hheight);
      }
      
      .leftcolumn {
        position:absolute;
        max-height: calc(80vh - 10px);
        height: calc(80vh - 10px);
        width: 18%;
        max-width: 18%;
        left: 10px;
      }
      .rightcolumn {
        position:absolute;
        max-height: calc(80vh - 10px);
        height: calc(80vh - 10px);
        width: 80%;
        max-width: 80%;
        left: calc(18% + 15px);
      }
      .row:after {
        margin: 10px;
      }
      
      .page {
        height: 100%;
      }
      
      .card {
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        width:100%;
        max-width:100%;
      }
      
      .rightcolumn > .card {padding:0;}
      
     
      
      button {
        padding: 2px;
        background-color: var(--blueDark);
        border: none;
        width:100%;
        color:var(--blueLight);
        
        text-decoration: none;
        font-size: 20px;
        font-family: Nouveau;
        
        display: block;
        transition: 0.3s;
      }
      
      button:hover {
        color: var(--blueDark);
        background-color: var(--blueLight);
        cursor: url('https://soul-of-foxglove.neocities.org/-CSS/Cursors/pointhand.png'), default;
      }
      
      button p {font-size: 30px; padding:0;margin:20px 5px 5px 5px;}
      
      .test {
        --margin: 10px;
        --sideDistance: 20%;
        position: absolute;
        background-color: rgb(189, 189, 189);
        
        width: calc(100% - (var(--sideDistance) * 2));
        left: var(--sideDistance); 
        bottom:var(--margin);
        max-height: calc((98vh - var(--hheight)) - (var(--margin) * 2));
        height: calc((98vh - var(--hheight)) - (var(--margin) * 2));
      }
      
      .testinner {
        --margin: 1px;
        --bdrLGHT: 2px solid rgb(255, 255, 255);
        --bdrDRK: 2px solid rgb(115, 115, 115);
        position: absolute;
        background-color: rgb(189, 189, 189);
        
        width: calc(100% - (var(--margin) * 2));
        left: var(--margin); 
        
        bottom:var(--margin);
        max-height: calc(100% - (var(--margin) * 2));
        height: calc(100% - (var(--margin) * 2));
        border-top: var(--bdrLGHT);
        border-left: var(--bdrLGHT);
        border-right: var(--bdrDRK);
        border-bottom: var(--bdrDRK);
        box-shadow: 1px 1px 0.5px rgb(0, 0, 0, 0.5);
        
        --padding: 3px;
      }
      
      .topbar {
        width: calc(100% - (var(--padding) * 2)); height: 5%;
        position: absolute;
        top:var(--padding); left:var(--padding);
        background: rgb(1, 19, 122);
        display:flex;
        justify-content: right;
      }
      
      .smBox {        
        position: relative;      
        aspect-ratio: 1 / 1;
        border-top: var(--bdrLGHT);
        border-left: var(--bdrLGHT);
        border-right: var(--bdrDRK);
        border-bottom: var(--bdrDRK);       
        box-shadow: 1px 1px 0.5px rgb(0, 0, 0, 0.7);
        background-color: rgb(189, 189, 189);
      }
      
      #one {
        height: calc(100% - (var(--padding) * 2));
        top:var(--padding); 
      }
      
      .two {
        aspect-ratio: 5 / 4; 
        height: 100%;
      }
      
      .smBox img, .left img {
        --m: 10%;
        width: calc(100% - (var(--m) * 2)); height: calc(100% - (var(--m) * 2));
        margin: var(--m);
      }
      
      .left {
        height:100%;
        position: absolute;
        width: 30%;
        display: flex;
        align-content: center;
        top:0;
        left:0;
      }
      
      .left p {
        font-family: 'w95fa';
        font-size: 2.5vmin;
        margin-top:2%;
        color: rgb(255, 255, 255);
      }
      
      .helpbar {
        width: calc(100% - (var(--padding) * 2)); height: 6%;
        position: absolute;
        top: calc(5% + var(--padding)); left:var(--padding);
        display:flex;
        color: rgb(0, 0, 0);
        font-family: 'w95fa';
        padding: 0.3% 0.3% 0.5% 0.3%;
        border: 2px solid rgb(185, 185, 185);
        border-bottom: 2px solid rgb(124, 124, 124);
        border-top: 2px solid rgba(202, 201, 193);
      }
      .helpbar > p > a {color: rgb(0, 0, 0);}
      
      .helpbar p {
        margin: 0 2% 0 0;
        font-size: 3vmin;
      }
      
      
      .lbar {
        position: absolute;
        top: calc(11% + var(--padding)); left:var(--padding);
        width: 10%;
        height: 70%;
        display: flex;
        align-content: flex-start;
        justify-content: right;
        flex-wrap: wrap;
        border-top: var(--bdrLGHT);
        border-bottom: var(--bdrDRK);
      }
      
      .sideB {
        font-family: 'w95fa';
        font-size: 1.7vmin;
        color: rgb(0, 0, 0);
        text-align: center;
        padding: 0.2%;
        width: 40%;
        height:auto;
        aspect-ratio: 1 / 1;
        box-shadow: 1px 1px 0.7px 0.7px rgb(0, 0, 0, 0.9);
        margin: -0.5px 1px 1px 1px;
        position: relative;
        border-top: var(--bdrLGHT);
        border-left: var(--bdrLGHT);
        border-right: var(--bdrDRK);
        border-bottom: var(--bdrDRK);
        background-color: rgb(189, 189, 189);
      }
      
      .sideB:hover {
        background-color: rgb(219, 219, 219);
        color: rgb(30, 30, 30);
      }
      
      .sideB2 {
        padding: 0.2%;
        width: 65%;
        height:auto;
        aspect-ratio: 2 / 3;
        position: relative;
        border-top: var(--bdrDRK);
        border-left: var(--bdrDRK);
        border-right: var(--bdrLGHT);
        border-bottom: var(--bdrLGHT);
        margin: 5%;
        margin-right: 10%;
      }
      
      .bttmbar {
        position: absolute;
        bottom: var(--padding); 
        left:var(--padding);
        width: calc(100% - (var(--padding) * 2));
        height: calc(19% - var(--padding) - var(--padding));
        border-top: var(--bdrLGHT);
        border-bottom: var(--bdrDRK);
      }
      
      .mid {
        position: absolute;
        right: var(--padding);
        bottom: calc(19% - var(--padding));
        width: calc(90% - var(--padding));
        height: 70%;
        overflow: hidden;
      }



.content-wrapper {
    width: 100%;
    height: 100%;
    padding-right: 50%;
    overflow-y: scroll;
    box-sizing: content-box;
    position:relative;
}

.scroller {
    z-index: 5;
        --bdrLGHT: 2px solid rgb(255, 255, 255);
        --bdrDRK: 2px solid rgb(115, 115, 115);
        background-color: rgb(189, 189, 189);
        border-top: var(--bdrLGHT);
        border-left: var(--bdrLGHT);
        border-right: var(--bdrDRK);
        border-bottom: var(--bdrDRK);
    cursor: pointer;
    position: absolute;
    width: 10px;
    border-radius: 0px;
    top: 0px;
    right: 3px;
    -webkit-transition: top .08s;
    -moz-transition: top .08s;
    -ms-transition: top .08s;
    -o-transition: top .08s;
    transition: top .08s;
}


    iframe {
      width: 100%; height: 100%; border:none;margin:0;padding:0;
      user-select: none;
      overflow:hidden;
    }









* {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);
}

a {color:var(--darkertext);}

a:hover, button:hover {
  cursor: url('https://soul-of-foxglove.neocities.org/-CSS/Cursors/pointhand.png'), default;
  color:var(--lightertext);
}



#homebutton {
  background-image: var(--buttonhome);margin-top:15%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width:50px;height:50px; 
}

#homebutton:hover {background-image: var(--buttonhomehov);}



.header {
        box-sizing: content-box;
        display: flex;
        z-index:5;
        left: 0;
        top: 0;
        width: 100%;
        
        background-image: var(--headerimg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom: var(--border);
        color: var(--darkertext);
      }
      
      .row {
        width:100%;
        margin:0;
        padding: 10px;
      }
      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
        margin: 15px;
      }

.page {
        background-image: var(--background);
        background-size: var(--backgroundsize);
        background-repeat: var(--backgroundrep);
        position: absolute;
        top:0;left:0;
        width:100%;
        z-index:1;
      }

 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');}