html {
    --black: #060A13;
    --dark: #303336;
    --med: #7D8182;
    --light: #CACECE;
    --white: #FAFBFB;
    --pure: #FFFFFF;
    --red: #99334D;
    --blue: #127DA1;
    --gold: #E6B31A;
    --pink: #F5A3B8;
    --sky: #8CC7D9;
    --cream: #FAE6D1;

    --spacing: 24px;
    --small: 8px;
    --tiny: 2px;
    
    --serif: "Alegreya", "Georgia", serif;
    --sans: "Alegreya Sans", "Trebuchet MS", sans-serif;
    --serifsc: "Alegreya SC", "Georgia", serif;
    --sanssc: "Alegreya Sans SC", "Trebuchet MS", sans-serif;
}

:target {
    scroll-margin-top: calc(140px + var(--spacing));
}

body {
    color: var(--black);
    background-color: var(--white);
    font-size: 16px;
    font-family: var(--sans);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: fit-content;
    quotes: "\2018" "\2019" "\201C" "\201D" "\2018" "\2019" "\201C" "\201D";
}

header {
    background-color: var(--cream);
    anchor-name: --header;
}

main {
    margin: var(--spacing);
    flex-grow: 1;
    display: flex;
}

footer {
    color: var(--med);

    & p {
        margin: var(--spacing);
    }
}

main div, p, ul {
    margin: var(--spacing) 0;
}

div p, div ul {
    margin: var(--small) 0;
}

ul {
    list-style-image: url("/afbeeldingen/cirkel.svg");
}

h1 {
    color: var(--dark);
    font-family: var(--serif);
    font-weight: 500;
    margin: 0;
}

a {
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;
}

a:hover {
    color: var(--dark);
    text-decoration: underline;
}

a.here {
    color: var(--dark);
}

b, .lc {
    color: var(--dark);
    font-weight: 700;
}

cite, .schuin {
    font-style: italic;
    color: var(--dark);
}

nav {
    color: var(--red);
    font-weight: 700;
    text-align: center;
    padding: var(--spacing);
    margin: 0 96px;
    text-wrap-style: balance;

    & a {
        text-decoration: unset;
        color: unset;
        font-weight: unset;
    }
}

nav ul {
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 0;

    & li::before {
        content: "{";
    }

    & li::after {
        content: "}";
    }

    & li::before, li::after {
        margin: 0 var(--small);
        color: var(--pink);
        font-family: var(--serif);
    }
}

figure, iframe {
    margin: var(--spacing) 0;
    border-style: solid;
    border-width: var(--tiny);
    border-color: var(--dark);
    display: block;
    background-color: var(--pure);
}

iframe {
    width: min(100%,700px);
}

.yt {
    aspect-ratio: 16/9;
}

figure {
    max-width: fit-content;
    max-height: fit-content;
    padding: var(--small);

    & img {
        max-width: 100%;
        border-style: solid;
        border-width: var(--tiny);
        border-color: var(--black);
    }

    & figcaption {
        text-align: left;
        color: var(--med);
        text-wrap-style: balance;
    }
}

figure:hover, iframe:hover {
    border-color: var(--red);
}

.s {
    margin-right: 0.2ch;
}

.c {
    margin-right: 0.1ch;
}

.lc {
    margin-right: 0.3ch;
}

abbr {
    all: unset;
}

.poleng {
    background-image: url("/afbeeldingen/poleng.png");
    background-repeat: repeat;
    height: 224px;
}

.patroon {
    background-image: url("/afbeeldingen/patroon.png");
    background-repeat: repeat-x;
    background-position-x: center;
    height: 56px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-width: var(--tiny);
    border-color: var(--dark);
    image-rendering: pixelated;
}

.logo {
    height: 4em;
    position: absolute;
    margin: var(--small) var(--spacing);
}

.l {
    left: 0;
}

.r {
    right: 0;
}

.agenda {
    border-style: solid;
    border-color: var(--dark);
    border-width: var(--tiny);
    padding: var(--small);
    overflow-y: hidden;
}

.agendah p {
    color: var(--med);
    font-family: var(--sanssc);
    font-weight: 300;
}

.agendah h2, .agendah p {
    margin: 0;
}

.agendah p time {
    font-weight: 400;
    color: var(--dark);
}

.agendas {
    color: var(--dark);
    font-weight: 500;
    font-style: italic;
    font-family: var(--serif);
    text-wrap-style: balance;
}

.agendam {
    font-weight: 400;
}

.agendad {
    color: var(--dark);
    font-weight: 300;

    & b {
        font-weight: 500;
        color: inherit;
    }
}

h2 {
    color: var(--red);
    font-weight: 900;
}

.hart {
    color: var(--red);
}

.kolom {
    margin: 0;
}

q, cite, .nbr {
    text-wrap-mode: nowrap;
}