html {
  background: black;
  color: white;
}

img {
  margin: 2.4rem auto;
  display: block;
  max-width: 80%;
}

.input-wrapper {
  display: block;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2.4rem 0;
}

input {
  background: none;
  border: 2px solid white;
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 0.25rem;
  font-size: 1.5rem;
  transition: 0.1s ease-in-out;
}
input:placeholder-shown {
  box-shadow: 0 0 10px 5px red;
}
input:focus {
  box-shadow: 0 0 10px 5px rgb(33, 33, 255);
  border: 2px solid white;
  outline: none;
}

button {
  background: none;
  outline: none;
  border: 2px solid white;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  color: white;
  font-size: 1.5rem;
  transition: 0.1s ease-in-out;
  cursor: pointer;
  box-shadow: 0 0 10px 5px black;
}
button.incorrect:focus {
  box-shadow: 0 0 10px 5px red;
}
button.correct {
  box-shadow: 0 0 10px 5px rgb(6, 223, 46) !important;
}
button:hover, button:focus {
  background: white;
  color: black;
}