/* Losse pagina's (foutpagina, privacy) in de kleuren van de Tegelkaart */
:root {
  --groen: #1b2a22; --groen-3: #2b4336; --perkament: #f1e6d0; --gloed: #e8b45c; --inkt: #16140f;
  --tekst-licht: rgba(241, 230, 208, .8); --lijn-licht: rgba(241, 230, 208, .16);
  --display: "Gloock", "Georgia", serif;
  --sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--groen); color: var(--perkament);
  font: 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--gloed); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gloed); outline-offset: 3px; border-radius: 4px; }
.tegels { height: 22px; background: url("img/tegels.jpg") 0 50% / 264px 132px repeat-x; opacity: .9; }
.pagina { width: min(100% - 32px, 42rem); margin: 0 auto; padding: clamp(2.5rem, 8vw, 5rem) 0; flex: 1; }
.logo { display: inline-block; margin-bottom: 2.5rem; }
.logo img { display: block; width: 180px; height: auto; }
h1 { margin: 0 0 1rem; font: 400 clamp(2.2rem, 7vw, 3.2rem)/1.05 var(--display); text-wrap: balance; }
h2 { margin: 2.2rem 0 .5rem; font: 400 1.5rem/1.2 var(--display); color: var(--gloed); }
p, ul { margin: 0 0 1rem; color: var(--tekst-licht); }
ul { padding-left: 1.2rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.knop {
  display: inline-flex; align-items: center; min-height: 3.1rem; padding: .8rem 1.4rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--sans); text-decoration: none;
}
.knop-vol { background: var(--gloed); color: var(--inkt); }
.knop-lijn { border-color: rgba(241, 230, 208, .45); color: var(--perkament); }
.knop-lijn:hover { border-color: var(--perkament); }
.klein { font-size: 1rem; opacity: .75; }