img {
  height: 20vh;
  width: 23vw;
  object-fit: contain;
  padding-right: 1vw;
  box-sizing: border-box;
}
.snacks-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
h3 {
  padding-top: 3vw;
  text-align: center;
  font-size: 4vh;
  color: hotpink;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ccff8d;
}

input {
  text-align: center;
  border-radius: .5em;
  width: 15vw;
  height: 6vh;
  font-size: 1em;
  transition: background-color 1s, color 1s;
}
#submit {
  width: 10vw;
  height: 4vh;
  font-size: .75em;
  border-radius: .5em;
  transition: transform 0.5s, background-color 0.5s;
  text-align: center;
  padding: 0;
}
input.correct {
  background-color: rgb(183, 249, 183);
  color: green;
  pointer-events: none;
}
input.wrong {
  background-color: rgb(249, 183, 183);
  color: rgb(128, 0, 0);
  pointer-events: none;
}

#submit:hover {
  background-color: rgb(199, 199, 199);
  transform: scale(1.05);
}