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

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

:root {
    --white: oklch(0.99 0.003 325);
    --black: oklch(0.25 0.01 325);
    --olive: oklch(0.4955 0.0896 126.19);
    --dark-olive: oklch(0.4255 0.0896 126.19);
    --error: oklch(0.5525 0.1567 26.47);
    background-color: var(--white);
    color: var(--black);
    font-family: 'Fredoka', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

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

header {
    background-color: var(--olive);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: -.5rem;

    h2 a {
        color: inherit;
        text-decoration: none;
    }
    nav {
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            flex-direction: column;

        }
        li {
            a {
                display: inline-block;
                padding: 1rem;
                color: inherit;
                text-decoration: none;
                align-content: center;
                &:hover {
                    background-color: var(--dark-olive);
                }
            }
        }
    }
}


footer {
    background-color: var(--olive);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: -.5rem;
    padding-top: .5rem;

    img {
        height: 3rem;
        width: 3rem;
        &:hover {
            filter: brightness(75%);
        }
    }
}

.mymessages {
    background-color: var(--olive);
    color: var(--white);
    margin-inline: -.5rem;
    .onderwerp {
        display: flex;
        flex-direction: row;
        justify-content: center;
        tbody {
            tr {
                th {
                    margin-inline: 1rem;
                    border: 2px;
                }
                td {
                    margin-inline: 1rem;
                    border: 2px;
                }
            }
        }
    }
}

main {
    margin-bottom: 5rem;
    .danku {
        display: flex;
        flex-direction: column;
        align-items: center;
        .checking-form {
            background-color: var(--olive);
            color: var(--white);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 4rem;
            margin-inline: 2rem;
            border-radius: 1rem;
            padding-inline: 2rem;
            padding-block: 1rem;
        }
        .back2start {
            background-color: var(--olive);
            color: var(--white);
            display: flex;
            justify-content: center;
            padding-bottom: 1rem;
            padding-top: 1rem;
            padding-inline: 2rem;
            text-decoration: none;
            border-radius: 2rem;
            margin-top: 0;
            margin-inline: 2rem;
            max-width: 20rem;
            &:hover {
                background-color: var(--dark-olive);
                color: var(--white);
            }
        }
    }

    .contact-form {
        justify-content: center;
        align-items: center;
        form {
            background-color: var(--olive);
            color: var(--white);
            align-items: center;
            margin-block: 2rem;
            margin-inline: auto;
            border-radius: 1rem;
            padding-inline: 2rem;
            padding-bottom: 3rem;
            padding-top: 2rem;
            div {
                display: flex;
                flex-direction: column;
                label {
                    z-index: 3;
                    position: relative;
                    top: -.5rem;
                    font-weight: bold;
                    margin-top: 1rem;
                }
                input {
                    margin-bottom: .5rem;
                    max-width: 30rem;
                    border: none;
                    line-height: 1.5;
                    font-size: 1rem;
                }
                textarea {
                    margin-bottom: .5rem;
                    max-width: 30rem;
                    border: none;
                    line-height: 1.5;
                    font-size: 1rem;
                }
                span.messageError {
                    color: var(--error);
                }
            }
            fieldset {
                max-width: 30rem;
                legend {
                    font-weight: bold;
                }
                div {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    input {
                        margin: 0;
                    }
                    label {
                        margin-inline: 1rem;
                    }
                }
            }
            #btnSubmit {
                background-color: var(--dark-olive);
                color: var(--white);
                border: none;
                border-radius: 2rem;
                padding-block: 1rem;
                padding-inline: 2rem;

                margin-top: 2rem;
                &:hover {
                    filter: brightness(150%);
                }
            }
        }
    }

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

        h2 {
            order: 1;
        }

        a {
            order: 2;
        }
    }

    .oefeningen {
        background-color: var(--olive);
        color: var(--white);
        display: inline-block;
        padding-bottom: 1rem;
        padding-top: 1rem;
        padding-inline: 2rem;
        text-decoration: none;
        border-radius: 2rem;
        margin-top: 2rem;
        &:hover {
            background-color: var(--dark-olive);
        }
    }

    .scholing {
        ul {
            li{
                display: flex;
                flex-direction: row;
                p {
                    order: 1;
                }
                img {
                    order: 0;
                    max-height: 3rem;
                    max-width: 3rem;
                    margin-inline-end: 1rem;
                }
            }
        }
    }

    .overMij {
        display: flex;
        flex-direction: column;
        a {
            order: 1;
            background-color: var(--olive);
            color: var(--white);
            display: inline-block;
            padding-bottom: 1rem;
            padding-top: 1rem;
            padding-inline: 2rem;
            text-decoration: none;
            border-radius: 2rem;
            margin-top: 1rem;
            max-width: 15rem;
            &:hover {
                background-color: var(--dark-olive);
            }
        }
        img {
            order: 0;
            max-width: 15rem;
            max-height: 15rem;
        }
    }

    ol.cards {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 0;
        padding-inline-end: -1rem;
        padding: 0;
        list-style: none;

        > li {
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 0 .2rem oklch(0 0 0 / .2), 0 0 2rem oklch(0 0 0 / .1);
            border-radius: 1rem;
            width: 87vw;
            max-height: 30rem;
            max-width: 40rem;

            img {
                order: -1;
                border-top-left-radius: 1rem;
                border-top-right-radius: 1rem;
            }

            div.content {
                display: flex;
                flex-direction: column;
                flex-basis: 18rem;

                padding: 1rem;
                border-bottom-left-radius: 1rem;
                border-bottom-right-radius: 1rem;

                a {
                    z-index: 2;
                }

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

                    text-indent: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    z-index: 1;
                    &:hover {
                        flex-grow: 2;
                    }
                }
            }
        }
    }

    a {
        img {
            height: 8rem;
            width: 8rem;
        }
        &:hover {
            filter: brightness(75%);
            flex-grow: 1.2;
        }
    }

    img {
        max-width: 90vw;
        max-height: 20rem;
    }

    section a.oplossing {
        display: inline-block;
        padding-bottom: 1rem;
        padding-top: 1rem;
        padding-inline: 2rem;
        text-decoration: none;
        background-color: var(--olive);
        color: var(--white);
        border-radius: 2rem;

        &:hover {
            background-color: var(--dark-olive);
        }
    }
}

@media (min-width: 40rem) {
    header {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;

        h2 {
            margin-inline: 1rem;
        }

        nav ul {
            flex-direction: row;

            li a {
                padding-inline: 2rem;
            }
        }
    }

    main {
        ol.cards {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            margin: 0;
            padding: 0;
            list-style: none;
            flex-wrap: wrap;

            > li {
                display: flex;
                flex-direction: column;
                position: relative;
                box-shadow: 0 0 .2rem oklch(0 0 0 / .2), 0 0 2rem oklch(0 0 0 / .1);
                border-radius: 1rem;
                max-width: 25rem;
                max-height: 32rem;

                img {
                    max-height: 20rem;
                    max-width: 27rem;
                }

                div.content {
                    margin-inline: 1rem;
                }
            }
        }
    }
}
@media (min-width: 60em) {
    header {
        display: flex;
        flex-direction: row;
    }

    footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        p {
            margin-inline: 1rem;
        }

        a {
            margin-inline: 3rem;
        }
    }

    main {
        ol.cards {
            > li {
                max-width: 20rem;
                max-height: 25rem;

                img {
                    max-height: 15rem;
                    max-width: 20rem;
                }
            }
        }
    }
}