@import url('../global.css');

:root {
  --title-color: var(--color-sciencequiz);
}

.quiz-area {
  border-top: 3px solid var(--color-sciencequiz);
}

.quiz-prompt {
  max-width: 38rem;
  color: var(--text-color);
  font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.quiz-choice-key {
  background: color-mix(in srgb, var(--color-sciencequiz) 16%, var(--white-color));
  color: var(--text-color);
}

.quiz-choice:not(:disabled):hover {
  box-shadow: 0 0 0 1px var(--color-sciencequiz);
}

.quiz-choices:has(.quiz-choice:nth-child(3):last-child) .quiz-choice:last-child {
  grid-column: 1 / -1;
}