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

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

:root{
    --text: oklch(0.99 0.003 325);
    --bg: oklch(0.28 0.33 192.5);
    background-color: var(--bg);
    --navbg:oklch(50% 0.37 192.5);;
    --navtxt:oklch(0.99 0.003 325);
    --navhover:oklch(0.94 0.05 192.5);
    --navactief:oklch(80.02% 0.13727 192.438 / 0.589);
    --bgcard:oklch(88.061% 0.10038 192.4);
    --border:var(--text);
    --shadow:var(--text);

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

body, html {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    color:var(--text);
    margin:0;
}

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


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

nav{
    ul{
        padding: 0.5rem;
        margin: 0;
        list-style:none;
        flex-wrap: wrap;
        display:flex;
    }   
        a{
            padding-top: 1rem;
            padding-bottom: 1rem;
            padding-inline: 2rem;
            display: inline-block;
            color: var(--text);
            background-color: var(--navbg);
            text-decoration: none;
            margin:0;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 5%;
        }

        a:hover {
            background-color: var(--navhover);
            color: var(--navbg);
        }

            li:first-child {
                margin-inline-end: auto;
                margin-inline-start: -1.5rem;
            }
        
                li:first-child a {
                    color: var(--text);
                    font-weight: bold;
                    margin-inline-end: auto;
                    margin-inline-start:-1.5rem;
                }
}

.active{
    background-color: var(--navactief);
    color: white;
    border-radius: 5%;
}


.button-link {
    background-color: var(--navbg);
    color: var(--text);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 2rem;
    text-decoration: none;
    display: inline-block;
    list-style: none;

    a{
    text-decoration: none;
    color: var(--text);
    }
}

.cards{
    padding:1rem;
    margin:0;
    flex:0;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
    display: flex;

        ul {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        padding-inline-start: 0;
        gap:1rem;
        }
    
        li {
            box-shadow: 0 0 .2rem oklch(0 0 0 / .2), 0 0 2rem oklch(0 0 0 / .1);
            border-radius: 1rem;
            flex: 10rem;
            width: 100%;
            min-width: 16em;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            overflow: hidden;
            display: flex;
            background-color: var(--navbg);
            box-shadow: 0 0 .1rem var(--shadow), 0 0 1rem var(--shadow);
            transition: box-shadow .5s ease-in-out, filter .5s ease-in-out, background-color .5s ease-in-out;
            border: 3px solid var(--border);

        img {
            order: -1;
            border-radius: .5rem;
            width: 100%;
        }
    }

        a:hover {
            background-color: var(--navhover);
            color: var(--navbg);
            transition: background-color 0.3s, color 0.3s;
            border-radius: 5%;
            opacity:30%;
        }

}
.content {
    padding: 1rem;
    a {
        color: var(--nav-link);
    }

.overlay-link {
    position: absolute;
    inset: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }
  
}   

footer {
    background-color: var(--navbg);
    padding: 1rem;
    color: var(--text);
    font-weight: lighter;
    a {
        color: var(--text);
    }

    p {
        margin-block: 0;
        text-align: center;
    }
}


.socials {
    ul {
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 0.5rem;

        li {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
}




/*--desktop--*/
@media (min-width: 1024px) {
    .container {
        max-width: 80rem;
        padding-inline: 1rem;
    }

    main {
        max-width: 70%;
    }

    .cards li {
        flex: 1 1 calc(25% - 2rem);
    }

    nav a {
        font-size: 1rem;
        padding: 18px 22px;
    }
}