/* standaard */

@font-face {
    font-family: "Fredoka";
    src: url(../fonts/Fredoka-VariableFont_wdth\,wght.woff2) format("woff2");
}

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

:root {
    font-family: "Fredoka", sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;

    --bg: oklch(0.9653 0 148.87);
    --header: oklch(0.7715 0.1228 237.81);
    --text: oklch(0.3487 0 60.99);

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

}

body {
    margin: 0;
}

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




header {
    background-color: var(--header);

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        background-color: var(--header);
        color: var(--text);
        text-decoration: none;
        display: block;
        padding: 1rem;
        font-size: 120%;
        border-bottom: 1px solid;
        transition: background-color .2s ease-in-out;

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

    li:first-child {
        font-weight: bold;
        font-size: 130%;
    }

    .locatie {
        font-weight: bold;
    }
}

.cards {

    list-style: none;
    margin: 0;
    padding: 0;

    li {
        position: relative;
        box-shadow: 0 0 .2rem rgb(0 0 0 / .2), 0 0 2rem rgb(0 0 0 / .1);
        border-radius: 15px;
        margin-block: 1rem;
        transition: transform .2s ease-in-out;

        &:hover,
        &:focus-visible {
            transform: scale(1.02);
        }

        img {
            width: 100%;
            order: -1;
        }

        h3,
        h2 {
            margin: 0;
            padding: 0.5rem 1rem;
        }

        p {
            margin: 0;
            padding: 0.5rem 1rem;
        }

        a {
            margin: 0;
            padding: 0.5rem 1rem;
            text-decoration: none;
            color: var(--text);
        }


    }

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

        text-indent: 1000%;
        white-space: nowrap;
        overflow: hidden;
        z-index: 10;
    }
}

.knop {
    margin-block: 1rem;
    padding-block: 1rem;

    a {
        padding: 1rem;
        background-color: var(--header);
        border-radius: 15px;
        text-decoration: none;
        color: var(--text);
    }
}

.insta {
    display: block;
    text-decoration: none;
    color: var(--text);
}

.reflectie {
    list-style: none;
}


/* tablet weergave */

@media (min-width: 48em) {
  

    header {
        background-color: var(--bg);

        nav {
            ul {
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
                margin-inline-start: -2rem;
                padding-block-start: 1rem;
            }

            a {
                background-color: var(--bg);
                border-bottom: none;
                padding: 0.5rem 1rem;
                color: inherit;
                border-radius: 2rem;
                transition: background-color .2s ease-in-out;

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

            li:first-child {
                margin-inline-end: auto;

                a {
                    background-color: var(--bg);
                    margin-inline-start: 1rem;
                }
            }

        }


    }

    .cards {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        justify-content: space-evenly;

        li {
            max-width: 30%;
        }


    }
}


/* desktrop weergave */

@media (min-width: 64em) {
   
    .cards {
        justify-content: flex-start;

        li {
            max-width: 20%;
        }
    }

    .reflectie{
        display: flex;
        gap: 1rem;
        margin-inline-start: -2rem;

        h3{
          margin-block-start: -1rem;  
        }
        
    }
}

/* navbar header */

/* navbar later gebruiken voor website maar is niet mobile first
header {
    nav {
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-inline-start: -2rem;
        }

        a {
            padding: 0.5rem 1rem;

            display: block;
            color: inherit;
            text-decoration: none;
            font-family: inherit;
            border-radius: 2rem;
            transition:  background-color .2s ease-in-out;

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

        li:first-child {
            margin-inline-end: auto;

            a {
                text-decoration: none;
                background-color: var(--bg);
                color: var(--text);
                font-family: inherit;
                font-weight: 900;

            }
        }

    }


}
*/