body {
  background-color: #111;
  color: #fff;
  font-size: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  font-family: Arial;
}

#infooverlay {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.75);
  display: none; /* js to flex*/
  justify-content: center;
  align-items: center;
}
#infooverlay .floatbox {
  background-color: rgba(255,255,255,0.7);
  border-radius: 15px; 
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#infooverlay .floatbox img {
  max-width: 60vmin;
}
#infooverlay .floatbox a {
  margin: 10px;
}

.excrement {
  position: absolute;
  width: 30vw;
  top: 50vw;
  left: 70vw;
  transform: rotate(35deg);
  animation-name: fart_animation;
  animation-duration: .5s;
  /* display: none; */
  visibility: hidden;
  z-index: 0;

}

#whale {
  max-width: 70vh;
  position: absolute;
  width: 90vw;
  z-index: 1;
}

#counter {
  font-size: 15vh;
  text-align: center;

  position: absolute;
  margin: auto;
  top: 60vh;
  right: 0;
  bottom: 0;
  left: 0;
}


@keyframes fart_animation {
  0%   {
    top: 40vw;
    left: 60vw;
    opacity: 0;
    visibility: initial;
  }
  25%  {
    opacity: 1;
  }
  50%  {
    opacity: 1;
  }
  100% {
    top: 65vw;
    left: 85vw;
    opacity: 0;
    visibility: hidden;
  }
}

/* no texthighlighting */
/* src: https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting*/
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome and Opera */
}