:root {
  color-scheme: light dark;
  --bg: #f7f7f2;
  --fg: #111111;
  --muted: #555555;
  --button-bg: #ffffff;
  --button-border: #111111;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050505;
  --fg: #f3f3f3;
  --muted: #b8b8b8;
  --button-bg: #121212;
  --button-border: #f3f3f3;
}

:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: "Courier New", Consolas, "Lucida Console", monospace;
}

.screen {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  min-width: 76px;
  min-height: 36px;
  border: 2px solid var(--button-border);
  border-radius: 0;
  color: var(--fg);
  background: var(--button-bg);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.answer-card {
  width: min(100%, 1400px);
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(6rem, 30vw, 28rem);
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

p {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 2rem);
  font-weight: 700;
}

.check-count {
  margin-top: 14px;
  font-size: clamp(0.9rem, 1.7vw, 1.35rem);
  opacity: 0.78;
}

@media (max-width: 520px) {
  .screen {
    padding: 16px;
  }

  h1 {
    font-size: clamp(5rem, 32vw, 12rem);
  }
}