#lost,
#won {
  display: none;
  width: 100%;
  font-size: clamp(2rem, 8vw, 6rem);
  height: auto;
  z-index: 3;
}

#lost p,
#won p {
  margin-top: 5vh;
  justify-content: center;
  width: 100%;
  display: flex;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#gallowBox {
  position: absolute;
  bottom: 60vh;
  left: 0;
  z-index: 1;
  transform: scale(1.2);
  transform-origin: top left;
}

#wordLetters {
  text-align: center;
  margin: auto;
  font-size: clamp(1.5rem, 4vw, 3rem);
  margin-top: 20vh;
  width: 80%;
  max-width: 600px;
  z-index: 1;
}

#wrongLetters {
  color: white;
  position: absolute;
  border-radius: 1rem;
  padding: 0.5rem;
  right: 5%;
  top: 5%;
  background-color: #625432;
  border: 0.5rem solid #362e1b;
  width: clamp(150px, 20%, 250px);
  height: clamp(100px, 20vh, 200px);
  z-index: 1;
  font-size: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
}

#difficulty {
  position: absolute;
  right: 5%;
  top: 30%;
  width: clamp(120px, 20%, 250px);
  text-align: left;
  z-index: 2;
}

#answeringBox {
  position: absolute;
  bottom: 65vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5; /* make input clickable above canvas */
}

.continueButton {
  position: absolute;
  top: 37vh;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 10%, 120px);
  height: clamp(40px, 5vh, 60px);
  z-index: 3;
}

#tries {
  position: absolute;
  top: 55vh;
  left: 2%;
  text-align: left;
  z-index: 2;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: sans-serif;
}

/* Responsive Tweaks */
@media (max-width: 1024px) {
  #gallowBox {
    transform: scale(1);
    bottom: 55vh;
  }
  #answeringBox {
    bottom: 60vh;
  }
}

@media (max-width: 768px) {
  body {
    overflow-y: auto; /* allow scrolling on mobile */
  }
  #gallowBox {
    transform: scale(0.9);
    bottom: 50vh;
  }
  #wordLetters {
    margin-top: 15vh;
    font-size: clamp(1rem, 5vw, 2.5rem);
  }
  .continueButton {
    top: 42vh;
  }
}

@media (max-width: 480px) {
  #gallowBox {
    transform: scale(0.8);
    bottom: 48vh;
  }
  #wrongLetters,
  #difficulty {
    right: 2%;
    top: auto;
    bottom: 5%;
    width: 40%;
  }
  #difficulty {
    bottom: 20%;
  }
  #wordLetters {
    font-size: clamp(1rem, 6vw, 2rem);
    margin-top: 12vh;
  }
  #tries {
    font-size: 1rem;
  }
}