html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background-image: url("../img/bg.png");
  background-size: cover;
  background-position: center;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation; 
  -ms-touch-action: manipulation; 
}
  

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2;
}


#light{
  position: absolute;
  width: min(40vw, 20vh);
  left: 50%;
  top: 25%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
}


#light_dark{
  position: absolute;
  width: min(40vw, 20vh);
  left: 50%;
  top: 25%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 4;
}

#play{
  position: absolute;
  width: min(20vw, 10vh);
  left: 30%;
  top: 70%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
}

#reset{
  position: absolute;
  width: min(20vw, 10vh);
  left: 30%;
  top: 85%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
}


#long{
  position: absolute;
  width: min(40vw, 20vh);
  left: 70%;
  top: 70%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
}

#short{
  position: absolute;
  width: min(20vw, 10vh);
  left: 70%;
  top: 85%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
}


.pushed{
  position: absolute;
  left: 12%;
  top: 52%;
  transform: translateY(-50%);
  z-index: 3;
}

.pushed img{
  height: min(80px, 5vh);
}