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

:root {
    font-family: "Poppins", Arial, sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
    background-color: oklch(1 0 46);
    color: var(--zwart);
    --achtergrond: oklch(0.6929 0.181681 50.5765);
    --hover: oklch(0.79 0.3054 60.99);
    --zwart: oklch(0 0 119);

    a:focus-visible {
        outline: dotted;
    }

    .link_kleur a {
        color: blue;
    }
}

body {
    margin: 0;
}

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

    p {
        max-width: 40rem;
    }
}

.container--nav {
    max-width: 100rem;
    margin-inline: auto;
    padding-inline: 1rem;
    display: flex;
}

header {
    background-color: var(--achtergrond);
    margin-block-end: 1.5rem;

    nav ul {
        padding: 1.2rem;
        margin: 0;
        list-style: none;
        display: block;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin-inline-start: auto;
    }

    nav ul li:first-child {
        margin-inline-end: auto;
    }

    nav a {
        padding: 1rem 2rem;
        color: var(--zwart);
        text-decoration: none;
    }

    nav a:hover {
        text-decoration: underline;
    }

    .naam {
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        color: var(--zwart);
    }
}

.intro {
    gap: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    
    .foto {
        margin-inline-start: auto;
        margin-inline-end: 2rem;
        padding-block-start: 2rem;

        img {
            width: 100%;
            border-radius: 90%;
        }
    }

    .foto_oef {
        padding-block-start: 2rem;
    }
}

.knop {
    display: inline-block;
    margin-block-start: 1rem;
    padding: 0.7rem 1.4rem;
    background-color: var(--achtergrond);
    color: var(--zwart);
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;

    &:hover {
        background-color: var(--hover);
        text-decoration: underline;
    }
}

.socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    

    ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    padding: 0;
    justify-content: center;

    img {
        width: 5.625rem;
        height: auto;
        transition: transform 0.2s ease;
    }

    img:hover {
        transform: scale(1.1);
    }
    }

    a {
        text-decoration: none;
        font-weight: bold;
        color: black;

        p {
            display: flex;
            justify-content: center;
        }
    }
}

footer {
    margin-block-start: 2rem;
    font-weight: 500;
    display: flex;
    justify-content: center;
    background-color: var(--achtergrond);
}

.cards {
    display: flex;
    gap: 1.5rem;
    margin-block-end: 2.5rem;
    padding: 0;
    flex-wrap: wrap;
    flex-grow: 1;

    li {
        flex: 0 1 calc(50% - 1.5rem);
        max-width: 18rem;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--achtergrond);
        border-radius: 0.5rem;
        overflow: hidden;
        position: relative;
    }

    .content {
        padding: 1rem;

        & > h3 {
        font-weight: bold;
        color: var(--zwart);
        }
        }

    img {
        order: -1;
        width: 100%;
        height: 8.75rem;
    }
    
    .overlay-link {
    position: absolute;
    inset: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }

    li a:not(.overlay-link) {
    z-index: 1;
    color: var(--zwart);
    }

    li:hover {
    box-shadow: 0 0 .2rem var(--achtergrond);
    }
}

.visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.about {
    h2 {
        line-height: 1;
        margin-block: 2.5rem 1rem;
        font-size: 1.6rem;  
    }

    h3 {
        line-height: 0.8;
        font-size: 1.1rem;
    }

    ul {
        margin-block-start: .5rem;
    }

    li {
        margin-block-end: .4rem;
    }
}



@media (min-width: 45em) {
    .cards li {
        flex: 0 1 calc(30% - 3rem);
        max-width: 18rem;
    }
}

@media (min-width: 60em) {
    header {
    background-color: var(--achtergrond);
    margin-block-end: 1.5rem;

    nav ul {
        padding: 1.2rem;
        margin: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin-inline-start: auto;
    }

    nav ul li:first-child {
        margin-inline-end: auto;    
    }

    nav a {
        padding: 1rem 2rem;
        color: var(--zwart);
        text-decoration: none;
    }

    nav a:hover {
        text-decoration: underline;
    }

    .naam {
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        color: var(--zwart);
    }
}
}