/* ==========================================================================
   1960s theme. Mod and pop art: pale mint paper, coral red, concentric
   target rings. Deliberately kept away from the 1970s palette so the two
   never feel like the same quiz.

   This file only repaints. It never changes a size, a spacing or a target
   area, so the senior-friendly layout in base.css stays intact.
   ========================================================================== */

:root {
  --bg: #e8f0ec;
  --bg-fade: rgba(232, 240, 236, 0);
  /* The op-art target that was on every mod poster and shopping bag. */
  --bg-accent-1: repeating-radial-gradient(
    circle at 50% -10%,
    rgba(194, 58, 43, .16) 0 22px,
    rgba(232, 240, 236, 0) 22px 44px
  );
  --bg-accent-2: none;

  --card: #fffdf7;
  --card-border: #b8c8c2;
  --card-shadow: 0 3px 0 rgba(23, 32, 43, .1), 0 12px 26px rgba(23, 32, 43, .1);

  --ink: #17202b;
  --ink-soft: #3d4b57;
  --ink-faint: #5d6b75;

  --accent: #b8332a;
  --accent-ink: #fffdf7;
  --accent-soft: #f6e0dd;

  --option-bg: #fffdf7;
  --option-border: #8fa39c;
  --option-ink: #17202b;
  --option-badge-bg: #e0a800;
  --option-badge-ink: #2c2100;

  --correct: #14672f;
  --correct-bg: #e2f1e7;
  --correct-border: #14672f;
  --wrong: #a3221b;
  --wrong-bg: #fae5e2;
  --wrong-border: #a3221b;

  --track: #c6d5cf;

  --radius: 20px;
  --radius-sm: 14px;

  --display-weight: 800;
  --display-spacing: -0.015em;
  --display-transform: none;
  --display-shadow: none;
}

body {
  background-size: auto, auto;
  background-position: center top;
}

/* Three mod dots under the title, the flat graphic look of the decade. */
.title::after {
  content: "";
  display: block;
  width: 6.5rem;
  height: 14px;
  margin-top: .8rem;
  background-image: radial-gradient(circle at 7px 7px, #b8332a 6px, transparent 7px),
    radial-gradient(circle at 7px 7px, #e0a800 6px, transparent 7px),
    radial-gradient(circle at 7px 7px, #17202b 6px, transparent 7px);
  background-size: 14px 14px;
  background-position: 0 0, 22px 0, 44px 0;
  background-repeat: no-repeat;
}