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

:root{  
    background-color: oklch(0.9961 0.0034 325.6);
    font-family: Montserrat, sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;

    --color-background: oklch(0.9961 0.0034 325.6);
    --color-header-bg: oklch(0.1454 0.062 264);
    --color-header-text: oklch(0.9961 0.0034 325.6);
    --color-black: oklch(0% 0 0);
}

body{
    margin: 0;
    overflow-x: hidden;
}

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

    h2 {
        font-size: 2rem ;
        margin-block-end: 1rem ;
        line-height: 1.2 ;
        padding-block-end: 0.5rem ;
        border-block-end: 2px solid oklch(0.1454 0.062 264);
    }

    h3 {
        line-height: 1;
        margin: 1rem -.2em 0;
    }

    .p {
        margin: 0 -.2em ;
        line-height: 1;
        margin-block-end: 1rem;
    }
}

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

    .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }


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

            &:hover {
                background-color: oklch(53.377% 0.25926 262.929 / 0.503);
            }

            &.active {
                background-color: oklch(0.5952 0.2195 0);
            }
        }
    }
}



.flex-oefeningen{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem ;
    padding: 0;
    list-style: none;
    justify-content: center ;
    padding-block-start: 2rem ;

}

.labo_0_ {
    .flex-oefeningen {
        .card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .content {
                text-align: left ;

                h3 {
                    margin-block-start: 0;
                }

                a {
                    display: inline-block ;
                    margin-block-start: 0.5rem ;
                    color: oklch(0.1454 0.062 264);
                    font-weight: 600
                }
            }

            &:hover {
                transform: translateY(-0.25rem);
                transition: transform 0.2s ease;
            }

            &:hover .overlay-link {
                opacity: 1;
            }

        }
    }
}
.card {
    background: var(--color-background);
    width: 18rem ;
    border-radius: 1rem ;
    padding: 1rem ;
    box-shadow: 0 0.25rem 0.9375rem oklch(0.1454 0.062 264 );
    text-align: center ;

    img {
        width: 100% ;
        height: 11rem ;
        object-fit: cover ;
        border-radius: 0.5rem ;
    }

    &:hover {
                transform: translateY(-0.25rem);
                transition: transform 0.2s ease;
            }

    &:hover .overlay-link {
                opacity: 1;
            }
}



.flex-sociaalmedia{
    display: flex;
    gap: 2rem;
    padding: 0;
    list-style: none;
    justify-content: center;

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

        h3 {
            margin-block-end: 0.5rem ;
        }

        a {
            display: flex ;
            align-items: center ;
            justify-content: center ;
            width: 5rem ;
            height: 5rem ;
            border-radius: 50% ;
            overflow: hidden ;
            background-color: oklch(0.1454 0.062 264);
            box-shadow: 0 4px 12px oklch(0.1454 0.062 264 / 0.2);
            transition: transform 0.3s, background-color 0.3s;

            img {
                width: 60% ;
                height: 60% ;
                object-fit: contain ;
            }

            &:hover {
                transform: scale(1.1);
                background-color: oklch(18.995% 0.05497 270.922);
            }
        }

        h3 {
            margin-block-start: 0.5rem;
            font-size: 1rem ;
            text-align: center ;
            color: oklch(0.1454 0.062 264);
        }
    }
}


.over-liam{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin: 4rem 0;

    .over-mij{
        flex: 1 1 19rem;
        max-width: 37.5rem;

        h2{
            font-size: 1rem;
            margin-block-end: 1rem;
        }

        p {
            margin-block-end: 1rem;
        }
    } 
    .over-foto{
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 400px;
        text-align: center;
        height: auto;
    }

    > div:last-child {
        flex: 1 1 30rem;
        display: flex ;
        justify-content: flex-end ;

        img {
            width: 100% ;
            max-width: 22rem ;
            height: auto ;
            border-radius: 1rem ;
            box-shadow: 0 4px 15px oklch(0.1454 0.062 264 / 0.2);
        }
    }
}

.button{
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
    border-radius: 4rem;
    text-decoration: none;
    margin-block-start: 1rem;

    &:hover {
        background-color: oklch(53.377% 0.25926 262.929 / 0.503);
    }
}

footer{
    text-align: center;
    border-block-start: 2px solid oklch(0.1454 0.062 264);
}

img {
    width: 10rem ;
    height: auto ;
    object-fit: cover ;
}

.extra-info {
    margin-block-start: 3rem ;
    padding: 2rem ;
    background-color: oklch(0.98 0.02 30);
    border-radius: 1rem ;
    margin-block-end: 2rem ;
    
    h2 {
        font-size: 1.5rem ;
        margin-block-end: 1rem ;
        width: 80% ;
    }
}



.flex-oefeningen .card {
    position: relative;
}


.flex-oefeningen .card .overlay-link {
    position: absolute;
    inset: 0;
    opacity: 0;

   
    text-indent: 100%;
    overflow: hidden;

    transition: opacity 0.2s ease-in-out;
}

.selfreflection {
    display: flex ;
    flex-direction: column;
    list-style: none;
    gap: 2rem ;
    padding: 1rem ;
    border: 2px solid oklch(0.1454 0.062 264);
    margin-block-end: 2rem ;
    text-decoration: none ;


    h3 {
        border-inline-start: 2px solid oklch(0.1454 0.062 264);
        padding-inline-start: 1rem ;
    }

    @media (min-width: 1000px) {
        flex-direction: row;
    }
}

.extra-footer_adds {
    background-color: oklch(0.1454 0.062 264);
    color: var(--color-background);
    padding: 1rem 0;
    margin-block-start: 2rem ;

    .coppyright {
        margin: 0 ;
        font-size: 0.875rem ;
    }

    address {
        font-style: normal ;
        margin-block-start: 0.5rem ;
        font-size: 0.875rem ;
    }
}

.contact-container {
    max-width: 40rem ;
    margin: 3rem auto ;
    padding: 2rem ;
    background-color: oklch(0.98 0.02 30);
    border-radius: 1rem ;
    box-shadow: 0 0.5rem 1.5rem oklch(0.1454 0.062 264 / 0.2);

    h1 {
        text-align: center ;
        margin-block-end: 2rem ;
        color: var(--color-header-bg);
    }

    .error, .success {
        padding: 1rem ;
        border-radius: 0.5rem ;
        margin-block-end: 1.5rem ;
        font-weight: 600 ;
        text-align: center ;
    }

    .error {
        background-color: oklch(0.9 0.5 20);
        color: var(--color-background);
    }

    .success {
        background-color: oklch(0.5 0.6 120);
        color: var(--color-background);
    }

    .contact-form {
        display: flex ;
        flex-direction: column ;
        gap: 1.5rem ;

        .form-group {
            display: flex ;
            flex-direction: column;

            label {
                margin-block-end: 0.5rem ;
                font-weight: 600 ;
                color: oklch(0.1454 0.062 264 );
            }

            input, textarea, select {
                padding: 0.75rem ;
                border-radius: 0.5rem ;
                border: 2px solid oklch(0.1454 0.062 264 );
                font-size: 1rem ;
                resize: vertical ;
                
                &:focus {
                    outline: none ;
                    border-color: oklch(0.5952 0.2195 0);
                    box-shadow: 0 0 0.5rem oklch(0.1454 0.062 264 / 0.3);
                }
            }

            textarea {
                min-height: 8rem ;
            }

        }

        .gender-group {
            display: flex ;
            flex-direction: column ;
            gap: 0.5rem ;

            .form-check {
                display: flex ;
                align-items: center ;
                gap: 0.5rem ;

                input {
                    width: 1.2rem ;
                    height: 1.2rem ;
                }
            }
        }

        .submit-btn {
            padding: 0.75rem ;
            background-color: var(--color-header-bg);
            color: var(--color-header-text);
            border: none ;
            border-radius: 2rem ;
            font-size: 1rem ;
            cursor: pointer ;
            transition: transform 0.2s ease, background-color 0.2s ease ;

            &:hover {
                background-color: oklch(0.53 0.26 262);
                transform: translateY(-0.1rem);
            }
        }
    }
}

.contact-container { 
    padding: 1rem ; 
} 
.button { 
    width: 100% ;
    text-align: center ; 
} 
header .container { 
    flex-direction: row ; 
    align-items: center ; 
} 
header nav ul { 
    justify-content: center ; 
} 
header nav { 
    padding: 0.75rem 1.25rem ; 
} 
.over-liam { 
    flex-direction: column ; 
    text-align: center ; 
} 
.over-liam > div:last-child { 
    justify-content: center ; 
} 
.over-liam img { 
    max-width: 18rem ; 
} 
.card { 
    width: 100% ; 
    max-width: 22rem ; 
} 
.card-img { 
    height: 9rem ; 
} 
.flex-sociaalmedia { 
    flex-direction: column ; 
    gap: 1.5rem ; 
} 
footer { 
    font-size: 0.875rem ; 
} 

@media (min-width: 48rem) {
    .button {
        width: auto ;
    }

    .contact-container{
        padding: 2rem ;
    }

    .flex-sociaalmedia {
        flex-direction: row ;
        gap: 2rem ;
    }

    .over-liam {
        flex-direction: row ;
        text-align: left ;
    }

    .over-liam > div:last-child {
        justify-content: flex-end ;
    }

    .over-liam img {
        max-width: 22rem ;
    }

    .card {
        width: 18rem ;
    }

    footer {
        font-size: 1rem ;
    }

    .messages-container .messages-table {
        font-size: 1rem ;
    }
}

.messages-container {
    max-width: 60rem ;
    width: 100% ;
    margin: 2rem auto ;
    padding: 1rem ;
    background-color: oklch(0.98 0.02 30);
    border-radius: 1rem ;
    box-shadow: oklch(0.1454 0.062 264) 0 0.5rem 1.5rem / 0.2 ;
    text-align: center ;
    box-sizing: border-box;

    .table-responsive {
        width: 100% ;
        overflow-x: auto ;
    }

    .messages-table {
        width: 100% ;
        border-collapse: collapse ;
        min-width: 30rem ;

        th, td {
            padding: 0.75rem ;
            border: 1px solid oklch(0.1454 0.062 264) ;
            text-align: left ;
        }

        th {
            background-color: oklch(0.1454 0.062 264) ;
            color: oklch(0.9961 0.0034 325.6) ;
            font-weight: 600 ;
        }

        tr:nth-child(even) {
            background-color: oklch(0.9 0.02 30) ;
        }

        tr:hover {
            background-color: oklch(0.98 0.02 30) ;
        }
    }

    .no-messages {
        text-align: center ;
        font-size: 1.25rem ;
        color: oklch(0.1454 0.062 264) ;
    }
}

.messages-container {
    padding: 1rem ;
    width: 100% ;

    .messages-table {
        font-size: 0.9rem ;
    }
}

@media  (min-width: 45em) {
    .cards li {
        flex: 0 1 calc(30% - 3rem);
        max-width: 18rem;
    }
}

.bedankt-pagina {
    min-height: 100vh ;
    display: flex ;
    margin: 0 ;
    background-image: url('../images/logo.png') ;
    background-repeat: no-repeat ;
    background-position: center ;
    background-size: 80% ;
    background-color: var(--color-black) ;
    display: flex ;
    align-items: center ;
    justify-content: center ;

    .bedankt-responsive {
        width: 100% ;
        padding: 1rem ;
        display: flex ;
        justify-content: center ;

        .bedankt-card {
            background-color: oklch(100% 0 0);
            max-width: 32rem ;
            width: 100% ;
            padding: 3rem 2rem ;
            border-radius: 1.5rem ;
            text-align: center ;
            box-shadow: 0 1rem 2.5rem oklch(0.1454 0.062 264 / 0.25);
        

            .bedankt-icoon {
                width: 4rem ;
                height: 4rem ;
                margin: 0 auto 1.5rem ;
                background-color: oklch(45% 0.24 263);
                color: oklch(0.9961 0.0034 325.6) ;
                font-size: 2rem ;
                font-weight: bold ;
                border-radius: 1rem ;
                display: flex ;
                align-items: center ;
                justify-content: center ;
                }

            .bedankt-tekst {
                font-size: 1rem ;
                color: oklch(0.35 0.02 264 );
                margin-block-end: 2rem ;
                line-height: 1.6;
                }

            .bedankt-knop {
                display: inline-block ;
                padding: 0.75rem 2rem ;
                background-color: oklch(45% 0.24 263);
                color: oklch(0.9961 0.0034 325.6) ;
                text-decoration: none ;
                border-radius: 2rem ;
                font-weight: 600 ;
                transition: transform 0.2s ease, background-color 0.2s ease ;
                }

            .bedankt-knop:hover {
                background-color: oklch(42.84% 0.20936 262.789 / 0.503);
                }

        .bedankt-card h1 {
            font-size: 1.5rem ;
            margin-block-end: 1rem ;
            color: oklch(0.1454 0.062 264 );
            }
        }
    }
}

@media  (min-width: 45em) {
    .cards li {
        flex: 0 1 calc(30% - 3rem);
        max-width: 18rem;
    }
}