body {
    padding: 0;
    margin:0;
}

.container {
    background-color: black;
    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("oldworldbackground.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:#a4e57a;
    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: #ffffff;
}

.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: 17%;
    margin-left: 21%; 
 font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
    color:#ffffff;
    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:#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;
}

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

.gonew {
   position: absolute; 
    text-align: center;
    width: 25%;
  margin-top: 29%;
    margin-left: -21.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;
}

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

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

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

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

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

.goold {
   position: absolute; 
    text-align: center;
    width: 25%;
  margin-top: 29%;
    margin-left: -1.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;
}

.goold:link {
    text-decoration: none;
    color: #a4e57a;
}

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

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

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


.oldinfo {
     height: 20%;
    position: absolute;
    width: 15%;
    top: 50%;
    left: 68%;
     transform: translate(-50%, 50%); 
}


.oldplaque {
    height:auto;
  position: absolute;
  width: 100%;            /* Scales relative to the background's width */
  left: 50%;             /* Horizontal position relative to background */
  bottom: 50%;              /* Vertical position relative to background */
  transform: translate(-50%, 50%); 
}

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

.old {
    height: 40%;
    position: absolute;
    width: 20%;
    top: 40%;
    left: 50%
}

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

.tooltip {
    min-width: 40%;
 max-width: 70%;
  text-align: center;
    font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
    color:#ffffff;
 font-size: clamp(0.5rem, 1vw, 3rem);
     -webkit-text-stroke: .5px #000000;
    position: absolute;
    left: -85%;
    bottom: 50%
}

.tooltip {
  /* tail dimension */
  --b: 2em; /* base */
  --h: 1.5em; /* height */

  --p: 85%; /* main position (0%:left 100%:right) */
  --x: 1.8em; /* tail position (relative to the main position). Can be percentage */
  --r: 1.2em; /* the radius */
  --c: #87681d;
    

  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    clamp(var(--b),var(--p) + var(--b)/2,100%) 100%,
    calc(var(--p) + var(--x)) calc(100% + var(--h)),
    clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 0 0 1 0/0 0 var(--h) 0/0 999px var(--h) 999px;
}