body {
    padding: 0;
    margin: 0;
}
.container {
    margin: 0;
    padding: 0;
    position: absolute;
	width: 100%;
    height: 100%;
	margin-left: auto;
	margin-right: auto;
    background-color: #3f3c0a;
	}
	
.inner-container {
    padding-top: 12px;
    margin: 10px;
    padding-left: 12px;
	width: 98%;
    height: 96%;
	position: absolute;
    background-image: url(indexbackground.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	}

.plants {
    bottom: 0;
    position: absolute;
    z-index: 1;
    width: 1450px;
    pointer-events: none;
    padding:0;
    margin:0;
}
.monkey {
    position: absolute;
    overflow:visible;
    contain:content;
    bottom: 0%;
    width: 800px;
    height: 800px;
}

.monkeytime {
    position: absolute;
    left: 30%;
    bottom:0%;
}

.monkey:hover .monkeytime {
    bottom: 15%;
    transition: ease-in-out;
}

.monkeyspeech {
    opacity:0;
    position: absolute;
    left: 40%;
    top: 35%;    
}

.monkey:hover .monkeyspeech {
    opacity: 1;
}

.monkey:hover .tooltip-monkey {
    opacity: 1;
}

.tooltip-monkey {
  color: #fff;
     min-width: 30%;
 max-width: 30%;
  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: 45%;
    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: #8a9f3a; /* the main color */
  position: absolute;
    opacity: 0;
}

.tooltip-monkey: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%);
}

.ape {
    position: absolute;
    overflow: visible;
    bottom: 0%;
   contain: content;
    right: 300px;
    width: 560px;
    height: 700px;
}

.apetime {
   position: absolute;
   right: -10%;
   bottom:5%;
}

.ape:hover .apetime {
    bottom:25%;
    transition: ease-in-out;
}

.ape:hover .tooltip-ape {
    opacity: 1;
}

.tooltip-ape {
  color: #fff;
     min-width: 30%;
 max-width: 35%;
  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: 55%;
    right: 35%;
  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: #b8ae11; /* the main color */
  position: absolute;
    opacity: 0;
}
.tooltip-ape: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%);
}


.ape:hover .apespeech {
    opacity: 1;
    transition: ease-in-out;
}