* {
 box-sizing: border-box;
 --frameBox: 40vmin;/* var(--frameBox)  */
 --frameWidth: 80%;
 --frameHeight: 100%;
 --frameTop: 0;
 --frameLeft: 10%;
 
 --hHeight: 10%;
 
 --padding: 3px;
 
 --topAccent: rgb(26, 71, 27);
 --baseColor: rgb(145, 145, 145);
 --baseLighter: rgb(165, 165, 165);
 --baseDarker: rgb(135, 135, 135);
 --font: rgb(255, 255, 255);
 --fontDark: rgb(235, 235, 235);
 
  font-family: "w95fa";
  color: var(--font);
  
  --borderXS: 2px solid transparent;
  --borderSM: 5px solid transparent;
  --border: 10px solid transparent;
  --borderIMG: url('/Images/BORDERS/lightDark.png');
  --borderIMGinverse: url('/Images/BORDERS/darkLight.png');
  --borderIMGrepeat: space;
  --borderIMGwidth: 1;
  --borderIMGslice: 25 24;
}

@font-face {
  font-family: 'w95fa';
  src: url(https://soul-of-foxglove.neocities.org/-CSS/fonts/w95fa.otf);
}
a:hover {color:var(--topAccent);}

.base {
  position: absolute;
  width: 100%; height:100%;
  top:0; left:0;
  background-image:url('/Images/-BACKGROUNDS/tiles.png');
  background-size: 500px;
}


.boxBase {
  top: var(--frameTop); left: var(--frameLeft);
  height: var(--frameHeight); max-height: var(--frameHeight);
  position: absolute;
  width: var(--frameWidth);
  background: var(--baseColor);  
  border: var(--borderSM);
  border-image: var(--borderIMG);
  border-image-repeat: var(--borderIMGrepeat);
  border-image-width: var(--borderIMGwidth);
  border-image-slice: var(--borderIMGslice);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}

.head {
      width: 100%;
      top: -1px; left:-1px;
      position: relative;
      aspect-ratio: 970 / 55; 
    }
    
    .boxDiv {
      width:100%;
      height: 100%;
      position: relative; 
      left:0; 
      top:0;
      border: 2px solid rgb(26, 71, 27);
      box-sizing: content-box;
    }

.topbarLeft {
  width: 60%;
  height:100%;
  max-height: 100%;
  top:0;
  left:calc(var(--padding) + 3px);
  position: absolute;
  display: flex;
  align-content: center;
}
      
.topbarLeft p {
  margin-top:4%;
  font-size: 70%;
}

.middle {
  width: 100%;
  height:90%; max-height:90%;
  top: 0; left:0; 
  padding: 3px;
  background: var(--baseColor);
  position: relative;
  border: var(--borderSM);
  border-image: var(--borderIMGinverse);
  border-image-repeat: var(--borderIMGrepeat);
  border-image-width: var(--borderIMGwidth);
  border-image-slice: var(--borderIMGslice);
  display:flex;
  overflow:scroll;
  overflow-X: hidden;
}

.middle img {
  width: 100%;
  margin: 0;
}

.middle h1 {font-size: 8vmin;text-align: center;padding:0;}

.middle p {
  text-align: center;
  font-size: 4vmin;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}


button {
  background: var(--baseColor);
  border: var(--border);
  border-image: var(--borderIMG);
  border-image-repeat: var(--borderIMGrepeat);
  border-image-width: var(--borderIMGwidth);
  border-image-slice: var(--borderIMGslice);
  width: auto;
  height:6vmin;
  line-height:100%;
  position: relative;
  align-self: center;
}

button:hover {
  background: var(--baseDarker);
  border-image: var(--borderIMGinverse);
  border-image-repeat: var(--borderIMGrepeat);
  border-image-width: var(--borderIMGwidth);
  border-image-slice: var(--borderIMGslice);
  cursor: pointer;
  color: var(--fontDark);
}

.midButton {
  display:flex;
  align-content:center;
  justify-content: center;
  width:100%;
}

.gap {width:5px;position:relative;}












      
      
      
      .column {
        min-width: 25%;
        max-width: 25%;
        height:100%;
        padding: 1px;
      }
      
      .small {
        height: auto;
        position: static;
        margin: 1px;
        width: 100%;
        display: inline-block;
        z-index: 2;
        cursor: pointer;
      }
      
      section {
        width:100%;
        padding: 2px;
      }
      
      section > a {
        font-size: 20px;
        color: var(--link);
      }
      
      section > a:hover {
        color: var(--linkHov);
      }
      
      .active {
        position: fixed;
        width: auto;
        max-width: 90%;
        min-height: 80%;
        max-height: 90%;
        z-index: 6;
      }
      
      
      
      
      
      
      .shadowboy {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        cursor: pointer;
      }
      
      
      #shade {
        display: none;
        background: rgb(0, 0, 0, 0.5);
        z-index: 4;
      }
      
      #bigImg {
        margin:0;
        padding:0;
        width: 100%;
        height: 100%;
      }
      
      .col {
        position:absolute;
        height: 80vmin; width: 80vmin;
        top: calc((100% - 80vmin) / 2);
        left: calc((100% - 80vmin) / 2);
      }