html, body { 
  height: 100% 
}

#hotpot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
}

.content {
  max-width: 500px;
  height: 100%;
  position: relative;
}

#control {
  margin-bottom: 40px;
}

#app {
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

#bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#title, #gameover {
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  top: 0;
  left: 0;
}

#hotpot {
  transform-origin: bottom;
  transition: transform 0.1s;
  width: 100%;
  height: 75vh; 
}

#score {
  margin-top: 20px;
}

.form-check-input {
  margin-right: 0.5em !important;
  float: none !important;
}

.fas {
  z-index: -1;
}