body {
  width: 100vw;
  /*100vw*/
  height: 100vh;
  /*100vh*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url("../images/sky.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hand {
  position: absolute;
  background-image: url("../images/main.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1000;
  /* stay on top of planes/forks */
}

.plane {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fork {
  position: absolute;
  background-image: url("../images/fork.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.coin {
  position: absolute;
  background-image: url("../images/coin.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.coins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* stretch across the screen */
  /* height can be controlled by the image aspect ratio or overridden in JS */
  background-image: url("../images/coins.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 1001;
  /* sit above the hand */
}

.explosion {
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: url("../images/explosion.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* info screen overlay */
#infoOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  /* start hidden */
  z-index: 1002;
  /* sit above game elements */
  pointer-events: none;
  /* allow clicks through */
}

#infoOverlay.visible {
  display: block;
}