* {
 box-sizing: border-box;
 --frameBox: 40vmin;/* var(--frameBox)  */
 --frameWidth: 50vmin;
 --frameHeight: 40vmin;
 --frameTop: 20vmin;
 --frameLeft: 20vmin;
 
 --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);
  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:auto;
  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);
}

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