@font-face { font-family: 'Montserrat'; src: url('/letters/montserrat-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/letters/montserrat-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/letters/montserrat-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/letters/montserrat-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/letters/montserrat-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --paars: #46178f;
  --paars-licht: #5a2ca6;
  --paars-diep: #2f0f63;
  --inkt: #1f1147;
  --wit: #ffffff;
  --grijs: #f2f2f2;
  --grijs-tekst: #5c5470;

  /* Antwoorden: rood driehoek, blauw ruit, geel cirkel, groen vierkant. */
  --a: #e21b3c;
  --b: #1368ce;
  --c: #c98500;
  --d: #26890c;

  --juist: #26890c;
  --fout: #e21b3c;
  --goud: #f5b800;
  --zilver: #c9ccd6;
  --brons: #cd7f4a;

  --rood: #e21b3c;
  --blauw: #1368ce;
  --geel: #f5b800;
  --oranje: #e8741e;
  --violet: #8e44d6;
  --zwart: #16181a;
  --groen: #26890c;

  --romp: 'Montserrat', system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paars);
  color: var(--wit);
  font-family: var(--romp);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, p { margin: 0; }

::selection { background: var(--goud); color: var(--inkt); }

:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

[hidden] { display: none !important; }

.vorm { display: block; fill: currentColor; }

.kleur-rood { --kleur: var(--rood); --kleur-op: #fff; }
.kleur-blauw { --kleur: var(--blauw); --kleur-op: #fff; }
.kleur-geel { --kleur: var(--geel); --kleur-op: #1f1147; }
.kleur-wit { --kleur: #fff; --kleur-op: #1f1147; }
.kleur-paars { --kleur: var(--violet); --kleur-op: #fff; }
.kleur-oranje { --kleur: var(--oranje); --kleur-op: #1f1147; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}