@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Light.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--cream-100);
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--green-700);
  color: var(--white);
}

input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.surface-cream :focus {
  outline: 2px solid var(--red-600);
  outline-offset: 3px;
}

.surface-green :focus {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

.surface-cream a {
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 2px solid var(--green-700);
}

.surface-cream a:hover {
  color: var(--cream-100);
  background: var(--green-700);
}

.surface-green a {
  color: var(--cream-100);
  text-decoration: none;
  border-bottom: 2px solid var(--gold-400);
}

.answer[aria-pressed="true"] {
  background: var(--green-700) !important;
  color: var(--white) !important;
}

.answer[aria-pressed="true"] .sub {
  color: var(--gold-400) !important;
}

button:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Snow. Resting positions live on the flakes so the field is not empty when animation is off. */
.snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.flake {
  position: absolute;
  top: 40%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f6f0e4;
  opacity: 0.75;
  animation: fall 14s linear infinite;
}

@keyframes fall {
  0% {
    top: -3%;
    transform: translateX(0);
  }
  50% {
    transform: translateX(14px);
  }
  100% {
    top: 103%;
    transform: translateX(-8px);
  }
}

.flake:nth-child(4n + 1) { top: 14%; }
.flake:nth-child(4n + 2) { top: 41%; }
.flake:nth-child(4n + 3) { top: 66%; }
.flake:nth-child(4n) { top: 88%; }
.flake:nth-child(3n) { margin-top: 12px; }
.flake:nth-child(5n) { margin-top: -10px; }
.flake:nth-child(1) { left: 3%; animation-duration: 15s; animation-delay: -2s; width: 5px; height: 5px; }
.flake:nth-child(2) { left: 9%; animation-duration: 19s; animation-delay: -9s; width: 4px; height: 4px; opacity: 0.55; }
.flake:nth-child(3) { left: 15%; animation-duration: 13s; animation-delay: -5s; }
.flake:nth-child(4) { left: 21%; animation-duration: 21s; animation-delay: -12s; width: 3px; height: 3px; opacity: 0.5; }
.flake:nth-child(5) { left: 27%; animation-duration: 16s; animation-delay: -1s; width: 7px; height: 7px; }
.flake:nth-child(6) { left: 33%; animation-duration: 18s; animation-delay: -7s; width: 4px; height: 4px; opacity: 0.6; }
.flake:nth-child(7) { left: 39%; animation-duration: 14s; animation-delay: -10s; }
.flake:nth-child(8) { left: 45%; animation-duration: 22s; animation-delay: -4s; width: 3px; height: 3px; opacity: 0.5; }
.flake:nth-child(9) { left: 51%; animation-duration: 17s; animation-delay: -13s; width: 5px; height: 5px; }
.flake:nth-child(10) { left: 57%; animation-duration: 15s; animation-delay: -6s; width: 7px; height: 7px; opacity: 0.7; }
.flake:nth-child(11) { left: 63%; animation-duration: 20s; animation-delay: -3s; width: 4px; height: 4px; opacity: 0.55; }
.flake:nth-child(12) { left: 69%; animation-duration: 13s; animation-delay: -11s; }
.flake:nth-child(13) { left: 75%; animation-duration: 18s; animation-delay: -8s; width: 3px; height: 3px; opacity: 0.5; }
.flake:nth-child(14) { left: 81%; animation-duration: 16s; animation-delay: -14s; width: 6px; height: 6px; }
.flake:nth-child(15) { left: 87%; animation-duration: 21s; animation-delay: -2s; width: 4px; height: 4px; opacity: 0.6; }
.flake:nth-child(16) { left: 93%; animation-duration: 14s; animation-delay: -9s; width: 5px; height: 5px; }
.flake:nth-child(17) { left: 6%; animation-duration: 23s; animation-delay: -16s; width: 3px; height: 3px; opacity: 0.45; }
.flake:nth-child(18) { left: 24%; animation-duration: 19s; animation-delay: -15s; width: 5px; height: 5px; opacity: 0.6; }
.flake:nth-child(19) { left: 48%; animation-duration: 24s; animation-delay: -18s; width: 3px; height: 3px; opacity: 0.45; }
.flake:nth-child(20) { left: 66%; animation-duration: 17s; animation-delay: -17s; width: 6px; height: 6px; opacity: 0.65; }
.flake:nth-child(21) { left: 84%; animation-duration: 25s; animation-delay: -20s; width: 3px; height: 3px; opacity: 0.45; }
.flake:nth-child(22) { left: 96%; animation-duration: 20s; animation-delay: -19s; width: 4px; height: 4px; opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .flake {
    animation: none;
  }
}

@media (min-width: 768px) {
  .phone {
    display: none !important;
  }

  .desktop {
    display: flex !important;
    align-items: stretch;
    min-height: 100vh;
  }

  .half {
    flex: 1 1 0;
    min-width: 0;
    min-height: 100vh;
  }
}

@media (max-width: 767px) {
  .desktop {
    display: none !important;
  }

  .phone {
    display: block !important;
    height: 100dvh;
    overflow: auto;
    background: var(--cream-100);
  }

  .phone-page {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
  }
}

/* A very short phone viewport may scroll instead of clipping the buttons. */
@media (max-width: 767px) and (max-height: 700px) {
  .phone-page {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
}