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

:root {
    --bg: oklch(1 0 89.876);
    --text: oklch(0.489 0.219 328.307);
    font-family: "Fredoka", sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 1rem;

    p {
        display: flex;
        font-weight: 600;
        align-items: center;

        a {
            &::before {
                content: "";
                display: inline-block;
                width: 2.3em;
                height: 2.3em;
                background-image: url("../afbeeldingen/logo.jpg");
                background-size: contain;
                margin-right: 0.4em;
                margin-bottom: 0.3em;
                vertical-align: middle;
            }

            color: var(--text);
            background-color: var(--bg);
            text-decoration: none;
            display: block;
            margin: 0;
            padding-block: 0.4rem;
            padding-inline: 0.4rem;
            transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;

            &:hover,
            &:focus-visible {
                color: var(--bg);
                background-color: var(--text);
            }
        }
    }


    nav {
        --text: oklch(0.182 0 89.876);
        --bg: oklch(0.626 0.187 144.561);

        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            margin: 0;
            padding: 0;
        }

        a {
            color: var(--text);
            background-color: var(--bg);
            text-decoration: none;
            display: block;
            padding-block: 1rem;
            padding-inline: 2rem;
            transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;

            &:hover,
            &:focus-visible {
                color: var(--bg);
                background-color: var(--text);
            }
        }
    }
}

html {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
    background: linear-gradient(oklch(0.489 0.219 328.307), oklch(0.626 0.187 144.561));
}

body {

    margin: 0;
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 40em;
    margin-inline: auto;

    .afbeelding img {
        display: flex;
        max-width: 65%;
        height: auto;
        flex: 1 1 auto;
        border-radius: 10%;

        &:hover {
            max-width: 100%
        }
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.2;
        margin-block-end: 0.25em;
        font-size: 1.5em;
    }

    h2 + h3 {
        margin-block-start: 0.5em;

        p {
            margin-block: 0.75em 0.75rem;
        }
    }
}

.cards {
    list-style: none;
    padding: 0;
    margin: auto;


    display: flex;
    flex-wrap: wrap;
    gap: 2rem;

    li {
        background-color: oklch(0.97 0.01 325);
        border-radius: 0.5rem;
        overflow: hidden;
        flex: 1 1 calc(33.33% - 2em);
        min-width: 12em;

        box-shadow: 0 0 0.4rem oklch(0 0 0 / .2),
        0 0 2rem oklch(0 0 0 / .1);
        display: flex;
        flex-direction: column;
        position: relative;

        img {
            width: 100%;
            height: 8em;
            display: block;
            order: 1;
            object-fit: cover;
        }

        .content {
            padding: 1rem;
            order: 2;

            h3 {
                margin-block: 0 0.5rem;
                font-size: 1.25rem;
                color: oklch(0.3 0.02 325);
            }

            p {
                margin-block-end: 1rem;
                color: oklch(0.4 0.01 325);
            }

            a {
                color: oklch(0.45 0.32 40);
                text-decoration: none;
                font-weight: bold;
                transition: color 0.3s ease-in-out;

                &:hover {
                    text-underline: oklch(0.45 0.32 40)
                }

                &:focus-visible {
                    color: oklch(0.25 0.01 325);
                }
            }
        }

        .overlay-link {
            position: absolute;
            inset: 0;

            --bg: transparant;
            transition: background-color 0.4s ease-in-out;
            text-indent: -10000rem;
            overflow: hidden;

        }

        .overlay-link:hover,
        .overlay-link:focus-visible {
            background-color: oklch(0.45 0.32 40 / 0.2);
        }
    }
}

footer p {
    background-color: var(--text);
}