body {
    margin: 0;
    padding: 0;
}
.container {
   background-image: url(bricks.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    min-height: 100vh;
    width: 100%;
}


.background {
    background-image: url(greatapebackground.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100%;
    min-height: 98vh;
    position: relative;
}


 .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: #a4e57a;
}

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

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

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

.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:#ffffff;
    font-size: clamp(0.5rem, 1.7vw, 3rem);
    -webkit-text-stroke: 1px black;
    z-index: 7;
}

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

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

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

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

.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:#a4e57a;
    font-size: clamp(0.5rem, 1.7vw, 3rem);
    -webkit-text-stroke: 1px black;
    z-index: 7;
}

.chimp {
    height: 40%;
    position: absolute;
    width: 100%;
    top: 35%;
    left: 20%
}

.greatapechimp {
    height:auto;
  position: absolute;
  width: 12%;            /* Scales relative to the background's width */
  left: 22%;             /* Horizontal position relative to background */
  bottom: 52%;              /* Vertical position relative to background */
  transform: translate(-50%, 50%); /* Centers the monkey on the spot */
}

.tooltip {
    position: absolute;
    bottom: 70%;
    left: 22%;
}

.tooltip {
  color: #d75600;
    min-width: 25%;
 max-width: 25%;
  text-align: center;
    font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
 font-size: clamp(0.5rem, 1vw, 2rem);
     -webkit-text-stroke: .5px #000000;
}

.tooltip {
  /* tail dimension */
  --b: 3em;   /* base */
  --h: 1.8em; /* height */
  --t: .6;    /* thickness (from 0 to 1) */

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


  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: #efc1a2; /* the main color */
  position: absolute;
}
.tooltip: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%);
}


.notebook {
    width: 10%;
    height: auto;
    position: absolute;
    left: 50%;             /* Horizontal position relative to background */
  bottom: 40%;              /* Vertical position relative to background */
  transform: translate(-50%, 50%);
}

.notebook:hover {
    filter: drop-shadow(10px 10px 20px yellow);
}