@font-face {
  font-family: 'Anton';
  src: url('/fonts/anton.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina';
  src: url('/fonts/londrina-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina';
  src: url('/fonts/londrina-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* Kleuren nagemeten uit de CSS van zwartecross.nl */
:root {
  --ink: #111111;
  --geel: #ffed00;
  --magenta: #eb1c74;
  --koraal: #f85563;
  --paars: #7c6eb0;
  --turq: #049bb8;
  --oranje: #f9a20c;
  --rood: #fe3940;
  --groen: #76bc21;
  --grond: #f3f0e9;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Een class met display: flex wint anders van de browser-regel voor [hidden]. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--grond);
  color: var(--ink);
  font-family: 'Londrina', Verdana, sans-serif;
  font-size: 19px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

h1, h2, h3, h4 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  background: #fff;
  border-left: 4px solid var(--ink);
  border-right: 4px solid var(--ink);
  display: flex;
  flex-direction: column;
}
@media (max-width: 540px) {
  .app { border-left: 0; border-right: 0; }
}

.kop {
  background: var(--paars);
  color: #fff;
  padding: 18px 18px 16px;
  border-bottom: 5px solid var(--ink);
  background-image: radial-gradient(rgba(255, 255, 255, 0.32) 2px, transparent 2px);
  background-size: 22px 22px;
}
.kop h1 { font-size: 34px; line-height: 0.95; }
.kop p { margin: 4px 0 0; font-weight: 900; font-size: 17px; }

.knop {
  display: block;
  width: 100%;
  border: 4px solid var(--ink);
  background: var(--geel);
  color: var(--ink);
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  font-size: 23px;
  padding: 14px 12px;
  cursor: pointer;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s;
}
.knop:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.knop:focus-visible { outline: 4px solid var(--magenta); outline-offset: 3px; }
.knop[disabled] { background: #ddd; color: #8b8b8b; box-shadow: 6px 6px 0 #bbb; cursor: not-allowed; }
.knop.rood { background: var(--rood); color: #fff; }
.knop.groen { background: var(--groen); color: #fff; }
.knop.wit { background: #fff; }

.voet {
  margin-top: auto;
  padding: 22px 18px 26px;
  border-top: 4px solid var(--ink);
  background: var(--grond);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 900;
  font-size: 14px;
  color: #6f6f6f;
}
.voet img { height: 17px; }
.voet a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 7px; }
.voet a:hover img { transform: scale(1.05); }

.melding {
  margin: 14px 18px 0;
  border: 4px solid var(--ink);
  background: var(--rood);
  color: #fff;
  padding: 10px 14px;
  font-weight: 900;
  box-shadow: 5px 5px 0 var(--ink);
}