@import "../../../styles.scss";


@keyframes wrong-answer {
  from { background-color: inherit}
  to { background-color: $thg_red }
}

@keyframes valid-answer {
  from { background-color: inherit }
  to { background-color: $thg_orange }
}

@keyframes results {
  from { background-color: inherit }
  to { background-color: $thg_yellow }
}

.queue-container {
  width: 100%;
  background-color: $thg_orange;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.queue-info {
  flex-direction: column;
  height: 100vh;
}

h1,h3  {
  text-align: center;
}

.penalty {
  color: white;
  animation: wrong-answer 3s 1;
  background-color: $thg_red;
}

.prize {
  animation: valid-answer 3s 1;
  color: white;
  background-color: $thg_orange;
}

.results {
  animation: results 3s 1;
  background-color: $thg_yellow;
  color: black;
}