:root {
    /* KLEUR */
    --primary: #ffeb92;
    --secondary: #123230;
    --bg: #f5f8e2;
    --vibrant: #cd6e03;
    --hf: #1d4680;

    background-color: var(--bg);
    color: var(--secondary);

    /* TYPOGRAFIE */
    --font-family: 'Arial', sans-serif;
    --font-size: 1rem;
    --line-height: 1.5rem;
    --h1-size: 2.5rem;
    --h2-size: 1.75rem;
    --h3-size: 1.2rem;
    --logo: 1.3rem;

    font-family: var(--font-family);

    /* SPACING */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;
    --spacing-xlarge: 3rem;
}

h1 {
    font-size: var(--h1-size);
    margin-block: var(--spacing-xlarge);
    font-weight: 900;

}

h2 {
    font-size: var(--h2-size);
    margin-top: var(--spacing-xlarge);
    color: #000000;
    margin-top: 4rem;
}

h3 {
    font-size: var(--h3-size);
    margin-top: 2rem;
}

p {
    font-size: var(--font-size);
    line-height: var(--line-height);
}