/* ==========================================================================
   1990s theme. Bright paper, teal and purple, confetti shapes.

   The look is the loud geometric style of nineties packaging, kept on a light
   background so contrast stays high for older eyes.
   ========================================================================== */

:root {
  --bg: #f3f6f4;
  --bg-fade: rgba(243, 246, 244, 0);
  --bg-accent-1: radial-gradient(
    100% 42% at 50% -4%,
    rgba(0, 155, 142, .3) 0%,
    rgba(123, 47, 247, .14) 45%,
    rgba(243, 246, 244, 0) 78%
  );
  /* Confetti dots, the tamest possible nod to nineties squiggle prints. */
  --bg-accent-2: radial-gradient(
      circle at 12% 22%,
      rgba(255, 201, 60, .5) 0 5px,
      transparent 6px
    ),
    radial-gradient(
      circle at 82% 62%,
      rgba(123, 47, 247, .28) 0 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 46% 88%,
      rgba(0, 155, 142, .3) 0 4px,
      transparent 5px
    );

  --card: #ffffff;
  --card-border: #c3d2cd;
  --card-shadow: 5px 5px 0 rgba(0, 122, 112, .2), 0 12px 26px rgba(20, 33, 61, .1);

  --ink: #131f36;
  --ink-soft: #3f4d63;
  --ink-faint: #63708a;

  --accent: #00776c;
  --accent-ink: #ffffff;
  --accent-soft: #d9f0ec;

  --option-bg: #ffffff;
  --option-border: #7b2ff7;
  --option-ink: #131f36;
  --option-badge-bg: #ffc93c;
  --option-badge-ink: #3a2a00;

  --correct: #0f6b34;
  --correct-bg: #e2f4e8;
  --correct-border: #0f6b34;
  --wrong: #a81f28;
  --wrong-bg: #fbe6e8;
  --wrong-border: #a81f28;

  --track: #d3ddd9;

  --radius: 16px;
  --radius-sm: 10px;

  --display-weight: 900;
  --display-spacing: -0.02em;
  --display-transform: none;
  --display-shadow: none;
}

body {
  background-size: auto, 260px 260px;
}

/* Offset block shadow on the answer buttons, straight out of nineties print. */
.option {
  box-shadow: 4px 4px 0 rgba(123, 47, 247, .18);
}

.option.is-correct {
  box-shadow: 4px 4px 0 rgba(15, 107, 52, .25);
}

.option.is-wrong {
  box-shadow: 4px 4px 0 rgba(168, 31, 40, .22);
}