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


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

:root {
    background-color: oklch(0.9961 0.0034 325.6);
    font-family: Fredoka;
    line-height: 1.6;
    scroll-behavior: smooth;
    --bg: oklch(0.99 0.003 325);
    --primary: oklch(37.887% 0.11108 279.708);
    --shadow: oklch(0% 0 0 / 0.1);
    --dark: oklch(0% 0 0);
    --color-link-hover: oklch(0.25 0.2 220);
    --button-bg: oklch(71.224% 0.00008 271.152);
    --button-hover: oklch(0% 0 0);
    --button-text: oklch(1 0 0);
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--primary);
}

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

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

nav {

    ul {
        padding: 0 ;
        margin: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        margin-inline-start: -2rem;
        }
        a {
            padding-block: 1rem;
            padding-inline: 2rem;
            color: inherit;
            text-decoration: none;
            display: inline-block;
    }
}


#oefening1 {
    scroll-behavior: smooth;
}

#oefening2 {
    scroll-behavior: smooth;
}

#oefening3 {
    scroll-behavior: smooth;
}

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


    li {
        display: flex ;
        flex-direction: column;
        background-color: var(--bg);
        border-radius: 1rem;
        overflow: hidden ;
        box-shadow: 0 0.25rem 0.625rem var(--shadow);
        transition: transform 0.3s ease, box-shadow 0.3 ease;
        width: calc(33% - 1.5) ;

        &:hover {
            box-shadow: 0 0.5rem 1rem var(--shadow);
        }

        img {
            width: 100% ;
            height: auto ;
            display: block ;
        }

        .content {
            padding: 1rem ;
            flex-grow: 1;

            h3 {
                margin-top: 0;
                margin-bottom: 0.5 ;
                color: var(--dark);
            }
        }
    }
}

#mylink a,
#mybutton a {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none ;
    padding: 0.5rem 1rem ;
    display: inline-flex ;
    align-items: center ;
    border-radius: 0.5rem ;
    transition: all 0.2s ease-in-out ;
}

.mylink a:hover {
    color: var(--color-link-hover);
    text-decoration: underline ;
}

.mybutton a {
    background-color: var(--button-bg)

}

section#oef4 {
    display: flex ;
    flex-direction: column ;
    gap: 1rem ;
    padding-block: 2rem ;
}

@media (min-width: 40rem) {
    section#oef4 {
        flex-direction: row ;
        gap: 1.5rem ;
    }
}

.mylink a::before{
    content: "🎮";
    margin-right: 0.5rem ;
}