:root {
  --background-color: #fff;
  --text-color: #000;
}
:root {
  --default-font: Arial, helvetica, sans-serif;
  --button-color: #bf1515;
  --button-hover-color: #711d1d;
  --button-text-color: #fff;
  --input-background-color: #141424;
  --input-text-color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #081020;
    --text-color: #fff;
  }
}

body {
  align-items: center;
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  font-family: var(--default-font);
  height: 100vh;
  gap: 1.2rem;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
}

div#question {
  width: 90vw;
  max-width: 700px;
}
span.q {
  font-size: 3.4rem;
  font-weight: bold;
}

input[type="text"],
input[type="number"] {
  background-color: var(--input-background-color);
  border: none;
  border-radius: 12px;
  color: var(--input-text-color);
  font-size: 12pt;
  padding: 12px;
}

input[type="text"]:focus,
input[type="number"]:focus {
  box-shadow: 0 0 8px #ffffff15;
  transform: translateY(-2px);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

input[type="submit"],
button[type="button"] {
  background-color: var(--button-color);
  border: none;
  border-radius: 5px;
  color: var(--button-text-color);
  font-size: 12pt;
  padding: 12px;
  transition: background 0.25s ease;
}
input[type="submit"]:hover,
button[type="button"]:hover {
  background-color: var(--button-hover-color);
  box-shadow: 0 0 8px #ffffff15;
  cursor: pointer;
  transform: translateY(-2px);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
input[type="submit"]:active,
button[type="button"]:active {
  transform: translateY(2px);
}

#seed,
#questnum {
  background-color: #1c1c1c;
  border: 1px solid #5b5b5b;
  font-family: "Oxygen Mono", monospace;
  font-weight: 400;
  font-size: 10pt;
  font-style: normal;
  padding: 4px;
}