* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

body {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  scrollbar-width: 0;
}

body::-webkit-scrollbar {
  display: none;
}

.page {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Orbitron", sans-serif;
  font-size: 4rem;
  letter-spacing: 1rem;
  font-weight: bold;
}

.clock {
  background: #000;
}

.hangman {
  background: rgb(51, 88, 63);
  justify-content: start;
  flex-direction: column;
  gap: 3rem;
  padding-top: 2rem;
}

.stickman {
  height: 15vw;
  width: 15vw;
  margin-right: 20px;
  border: 2px black solid;
  grid-row-start: 1;
  grid-row-end: 4;
}

.letters {
  display: grid;
  grid-template-columns: repeat(10, auto);
  grid-template-rows: auto auto auto;
  gap: 10px;
}

.letters > button {
  width: 5vw;
  height: 10vh;
  background-color: #041a10;
}

.letters > button:hover:enabled {
  border: 2px white solid;
  transition-duration: 10ms;
}

.letter > button:disabled,
button[disabled] {
  background: rgb(51, 88, 63);
  border: 2px #041a10 solid;
}

.word {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.word > div {
  background-color: white;
  color: black;
  border-radius: 5px;
  width: 10vh;
  height: 7vw;
  font-size: 7vh;
  display: flex;
  align-items: center;
  justify-content: center;
}