html {
  width: 100%;
  background-color: skyblue;
  /* From W3 Schools */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  overflow: hidden;
  max-width: 100%;
  overflow-x: hidden;
}
@media screen and (max-width: 768px){
  ::-webkit-scrollbar {
      -webkit-appearance: none;
      appearance: none;
  }
}
html::-webkit-scrollbar {
  display: none;
}
#wrapper{
  overflow: hidden;
  max-width: 100%;
  overflow-x: hidden;
}
.banana{
  width: 48.4px;
  position: absolute;
  top: 0px;
  z-index: 1;
}
.banana:hover{
  cursor: pointer;
}
.peel{
  width: 77.44px;
}
.splat{
  position: absolute;
  width: 87.12px;
  display: none;
}
.splat-show{
  display: block;
  transition: 2s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#bananaTitleText{
  animation: fadeIn 2s;
  position: relative;
  z-index: 2;
  color: rgb(253, 255, 112);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: max(3vw, 7vh);
  text-align: center;
}
#footerDiv{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #3cabfa;
  left: 0px;
  top: 99%;
  transition: 0.3s;
  cursor: pointer;
  z-index: 2;
}
#footerDiv.footerActive{
  cursor: default;
  position: absolute;
}
#footerContent{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #3cabfa;
  left: 0px;
  top: 65vh;
  transition: 0.3s;
  z-index: 3;
  display: none;
  text-align: center;
  color: white;
  font-size: max(3vh);
}
.navigationText:hover{
  cursor: pointer;
  color: #fffbb8
}