body {
    padding: 0;
    margin:0;
}

.container {
    background-color: #5c2003;
    background-size: cover;
    margin: 0;
    padding: 0;
    position: absolute;
	width: 100%;
    height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.inner-container {
    padding-top: 12px;
    margin: 10px;
    padding-left: 12px;
	width: 98%;
    height: 96%;
	position: absolute;
    background-image: url(lesserstudybackground.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	}


 .menucontainer {
     position: absolute;
    display: grid;
    grid-template-areas: "overlay";
    width: 45%; 
    left: 10%;
  }


  .menucontainer img {
    grid-area: overlay;
    max-width: 22%; 
    height: auto;
  }

  .homebutton {
      position: absolute;
      height: auto;
    z-index: 1;
    width: 100%;
      margin-left: 2%;
  }

.gohome {
   position: absolute; 
    text-align: center;
   margin-top: 6%;
    margin-left: 5.5%; 
 font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
    color:#ffffff;
    font-size: clamp(0.5rem, 2vw, 4rem);
    -webkit-text-stroke: 1px black;
    z-index: 6;
}

.gohome:link {
    text-decoration: none;
    color: #ffffff;
}

.gohome:visited {
    text-decoration: none;
    color:#ffffff;
}

.gohome:hover {
    text-decoration: none;
    color: #a4e57a;
}

.gohome:active {
    text-decoration: none;
    color:#ffffff;
}

  .monkeybutton {
      height: auto;
    position: absolute;
    z-index: 4;
    width: 100%;
    margin-top: 12%; 
    margin-left: -10%;
  }

.gomonkey {
    position: absolute; 
    text-align: center;
  margin-top: 18%;
    margin-left: -7.5%; 
 font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
    color:#ffffff;
    font-size: clamp(0.5rem, 1.5vw, 4rem);
    -webkit-text-stroke: 1px black;
    z-index: 5;
}

.gomonkey:link {
    text-decoration: none;
    color: #ffffff;
}

.gomonkey:visited {
    text-decoration: none;
    color:#ffffff;
}

.gomonkey:hover {
    text-decoration: none;
    color: #a4e57a;
}

.gomonkey:active {
    text-decoration: none;
    color:#ffffff;
}

.apebutton {
    height:auto;
    position: absolute;
    z-index: 5;
    width: 100%;
    margin-top: 12%;
    margin-left: 15%;
  }

.goape {
   position: absolute; 
    text-align: center;
  margin-top: 18%;
    margin-left: 21%; 
 font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
    color:#a4e57a;
    font-size: clamp(1rem, 2vw, 4rem);
    -webkit-text-stroke: 1px black;
    z-index: 9;
}

.goape:link {
    text-decoration: none;
    color: #ffffff;
}

.goape:visited {
    text-decoration: none;
    color:#ffffff;
}

.goape:hover {
    text-decoration: none;
    color: #a4e57a;
}

.goape:active {
    text-decoration: none;
    color:#ffffff;
}

.lesserapebutton {
    height: auto;
    position:absolute;
    z-index: 6;
    width: 100%;
    margin-top: 26%;
    margin-left: 5%;
}

.golesser {
   position: absolute; 
    text-align: center;
    width: 25%;
  margin-top: 31%;
    margin-left: 3.5%; 
 font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
    color:#a4e57a;
    font-size: clamp(0.5rem, 1.7vw, 3rem);
    -webkit-text-stroke: 1px black;
    z-index: 7;
}

.greatapebutton {
    height: auto;
    position: absolute;
    z-index: 6;
    width: 100%;
    margin-top: 26%;
    margin-left: 25%;
}

.gogreat {
   position: absolute; 
    text-align: center;
    width: 25%;
  margin-top: 31%;
    margin-left: 23%; 
 font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
    color:#ffffff;
    font-size: clamp(0.5rem, 1.7vw, 3rem);
    -webkit-text-stroke: 1px black;
    z-index: 7;
}

.gogreat:link {
    text-decoration: none;
    color: #ffffff;
}

.gogreat:visited {
    text-decoration: none;
    color:#ffffff;
}

.gogreat:hover {
    text-decoration: none;
    color: #a4e57a;
}

.gogreat:active {
    text-decoration: none;
    color:#ffffff;
}

.books {
    width: 20%;
    position: absolute;
    left: 60%;
    bottom: 15%;
    transform: translate(-50%, 50%);
}

.books:hover {
    filter: drop-shadow(0 0 20px #ffbe21);
}

.scholar {
    position: absolute;
    left: 55%;
    bottom: 35%;
}

.tooltip {
  color: #fff;
     min-width: 20%;
 max-width: 20%;
  text-align: center;
 text-decoration: none;
    font-size: clamp(0.5rem, 1vw, 2rem);
    font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* tail dimension */
  --b: 3em;   /* base */
  --h: 2em; /* height */
  --t: .5;    /* thickness (from 0 to 1) */

  --p: 50%;  /* main position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */

    bottom: 50%;
    left: 40%;
  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2)/var(--r);
  background: #b86e11; /* the main color */
  position: absolute;
}
.tooltip:before {
    text-decoration: none;
  content: "";
  position: absolute;
  top: 100%;
  left: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
  width: var(--b);
  height: var(--h);
  background: inherit;
  border-bottom-left-radius: 100%;
  -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
}

.tooltip-dont {
  color: #fff;
     min-width: 10%;
 max-width: 10%;
  text-align: center;
 text-decoration: none;
    font-size: clamp(0.5rem, 1vw, 2rem);
    font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
 /* tail dimension */
  --b: 3em;   /* base */
  --h: 1.8em; /* height */
  --t: .6;    /* thickness (from 0 to 1) */

  --p: 38%;  /* main position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */


    bottom: 55%;
    right: 15%;
  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2)/var(--r);
  background: #08a80b; /* the main color */
  position: absolute;
    opacity: 0;
}

.tooltip-dont:before {
  content: "";
  position: absolute;
  top: 100%;
  left: clamp(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*var(--b)/2,100% - var(--b));
  width: var(--b);
  height: var(--h);
  background: inherit;
  border-bottom-right-radius: 100%;
  -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 0 0,#0000 99%,#000 101%);
}

.tooltip-dont:hover {
    opacity:.5;
}