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

:root {
    background-color: oklch(0.9961 0.0034 325.6);
    font-family: "Montserrat", sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

.container {
    max-width: 80rem;
    margin-inline: auto;
    padding:0 1rem;
}

header{
    background-color: oklch(0.145 0.062 264);
    color: oklch(0.9961 0.0034 325.6);
}

main {
    /* schaalt met vensterhoogte */
    /* schaalt met vensterbreedte */
    padding: 2vh 1rem 4vw;
}

footer {
    background-color: oklch(0.3211 0 0);
}

nav ul {
    padding: 0;
    margin-left: -2rem;
    list-style: none;
}

nav a {
    display: inline-block;
    padding: 1rem 2rem;
    color: inherit;
    text-decoration: none;
}

nav ul li:nth-child(2) {
    background-color: oklch(0.5 0.1 200);
    color: oklch(0.996 0.003 325.6);
}

nav a:hover{
    background-color: oklch(1 0.1 200);
}

nav a:focus-visible {
    outline: 4px dotted oklch(0.996 0.003 325.6); /* wit, 4px, gestippeld */
    outline-offset: 3px;                             /* ruimte tussen link en outline */
}

footer .container > *:last-child {
    margin-bottom: 0;
}

.highlight {
    font-weight: bold;
    font-style: italic;
}