@font-face {
    font-family: "IBMPlexSerif";
    src: url("../fonts/IBMPlexSerif-Regular.woff2") format("woff2")
}

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

:root {
    font-family: IBMPlexSerif, sans-serif;
    background-color: oklch(0 0 202.24 / 20%);
    line-height: 1.5rem;
}

body {
    margin: auto;
    --primary: oklch(0.7884 0.1234 202.24);
    --secondary: oklch(0.634 0.1508 264.2);
}

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

header {
    background: linear-gradient(var(--primary), var(--secondary));
    padding: 1.5rem;

    nav ul{
        list-style: none;
        a {
            text-decoration: none;
        }
    }
}

/* OOCSS */
.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.col {
    flex-direction: column;
}

.row {
    flex-direction: row;
}

.justify-center {
    justify-content: center;
}

.li-style-none {
    list-style: none;
}

.space-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.mb-2 {
    margin-block: 2rem;
}

.m-auto {
    margin: auto;
}

.gap-4 {
    gap: 4rem;
}

.pis-0 {
    padding-inline-start: 0;
}

.flex-wrap {
    flex-wrap: wrap;
}
/* OOCSS */

.hallo {
    picture {
        order: -1;
    }

    img {
        max-width: 18rem;
        border-radius: 1.25rem;
    }

    padding: 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(var(--secondary),25%, oklch(0.8616 0 202.24));
    box-shadow: 0 0 2rem oklch(0.7884 0.1234 202.24 / 50%);

    div a {
        text-decoration: none;
        padding: .75rem;
        border-radius: .75rem;
        background-color: var(--secondary);
        display: inline-block;
        color: oklch(0 0 0);
        font-weight: bold;
        font-size: large;
        transition: scale .2s ease-in-out;

        &:hover {
            scale: 1.1;
        }
    }
}

footer {
    background: linear-gradient(var(--secondary), var(--primary));
    padding: 1rem;
    border-top-right-radius: 1.25rem;
    border-top-left-radius: 1.25rem;

    ul {
        gap: 2.5rem;
        transition: scale .2s ease-in-out;

        li {
            transition: scale .2s ease-in-out;
            &:hover {
                scale: 1.15;
            }
        }
    }
}

.card {
    background: linear-gradient(oklch(0.8616 0 202.24),75%,var(--secondary));
    padding: 1rem;
    border-radius: 1.25rem;
    box-shadow: 0 0 2rem oklch(0.7884 0.1234 202.24 / 50%);
    flex: 0 0 9rem;
    position: relative;
    transition: scale .2s ease-in-out;

    img {
        order: -1;
    }

    &:hover {
        scale: 1.05;
    }
}

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

header nav ul li a{
    margin-block: .5rem;
    font-weight: bold;
    font-size: large;
    color: oklch(0.2814 0.0507 248.18);
}

.current-page {
    background-color: var(--primary);
    padding: .75rem;
    border-radius: 1.25rem;
}

.over-mij {
    img{
        max-width: 18rem;
        border-radius: 1.25rem;
    }

    picture {
        order: -1;
    }

    padding: 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(var(--secondary),25%, oklch(0.8616 0 202.24));
    box-shadow: 0 0 2rem oklch(0.7884 0.1234 202.24 / 50%);
    margin-block: 2rem;
}

.over-mij-color-2{
    background: linear-gradient(oklch(0.8616 0 202.24),25%,var(--secondary));
}

.placeholder {
    width: 1px;
    height: 1px;
    position: absolute;
    margin-right: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

.contact {
    padding: 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(oklch(0.8616 0 202.24),75%,var(--secondary));
    box-shadow: 0 0 2rem oklch(0.7884 0.1234 202.24 / 50%);
    margin-block: 2rem;
    width: 100%;

    .button {
        padding: 1rem;
        border-radius: 1.25rem;
        border: none;
    }

    li input, li textarea {
        padding: 1rem;
        border: none;
        border-radius: 1.25rem;
    }

    .checkbox {
        margin-block-start: 1rem;

        label > input{
            border-radius: 1.25rem;
        }
    }
}

.exercise {
    flex-basis: 16rem;
}

.labo {
    padding: 1rem;
    border-radius: 1.25rem;
    box-shadow: 0 0 2rem oklch(0.7884 0.1234 202.24 / 50%);
    margin-block: 2rem;

    div a {
        text-decoration: none;
        padding: .75rem;
        border-radius: .75rem;
        background-color: var(--secondary);
        display: inline-block;
        color: oklch(0 0 0);
        font-weight: bold;
        font-size: large;
        transition: scale .2s ease-in-out;
        margin-block-start: 1rem;

        &:hover {
            scale: 1.1;
        }
    }

    picture {
        order: -1;
        padding: 1rem;
    }
}

.labo-color-1{
    background: linear-gradient(var(--secondary),25%,oklch(0.8616 0 202.24));
}

.labo-color-2 {
    background: linear-gradient(oklch(0.8616 0 202.24),75%,var(--secondary));
}

@media (min-width: 640px) {
    header {
        display: flex;
        justify-content: space-between;
        padding-inline-end: 5rem;

        nav ul{
            display: flex;
            align-items: center;
            gap: 2rem;

            li {
                transition: scale .2s ease-in-out;
                display: inline-block;

                &:hover {
                    scale: 1.20;
                }
            }
        }

        .exercise:last-child {
                flex-direction: column;
                flex-grow: 0;
            }
        }
    .contact {
        width: auto;
    }

    .hallo {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .over-mij {
        flex-direction: row;
        justify-content: space-evenly;
        width: 75%;
        margin-inline: auto;
    }

    .exercise {
        flex-basis: 13rem;

        &:last-child {
            flex-direction: row;
            justify-content: space-evenly;
            flex-grow: .5;
        }
    }

    .labo {
        align-items: center;
    }
    }

@media (min-width: 1024px) {
    header {
        display: flex;
        justify-content: space-between;
        padding-inline-end: 5rem;

        nav ul{
            display: flex;
            align-items: center;
            gap: 2rem;

            li {
                transition: scale .2s ease-in-out;
                display: inline-block;

                &:hover {
                    scale: 1.20;
                }
            }
        }
    }

    .hallo {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        max-width: 65%;
        padding-inline-start: 6rem;

        picture img {
            order: 1;
        }
    }

    .contact {
        width: auto;
    }

    .over-mij {
        flex-direction: row;
        justify-content: space-evenly;
        width: 75%;
        margin-inline: auto;
    }

    .exercise {
        flex-basis: 13rem;

        &:last-child {
            flex-direction: column;
            justify-content: space-evenly;
            flex-grow: unset;
        }
    }

    .labo {
        justify-content: space-evenly;
        flex-direction: row;
    }
}

@media (max-width: 639px) {
    header nav ul li a {
        display: block;
    }
}