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

:root {
    background-color: oklch(1 0 238.76);
    --bg-light: oklch(0.94 0.006 161);
    --text-accent: oklch(0.42 0.05 165);
    font-family: "Fredoka", sans-serif;
    scroll-behavior: smooth;
}

body {
    margin: 0;

    p {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 1.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    h1 {
        font-size: 3.375rem;
    }

    h2 + h3 {
        margin-block-start: -0.5rem;
    }

    p + h3 {
        margin-block-start: 1.5rem;
    }
    .bedankt{
        h1{
            font-size: 1.5rem;
        }
        p{
            font-size: 1rem;
        }
    }

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

        img {
            width: 10rem;
            height: auto;
        }

        nav {
            ul {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                list-style: none;

                .active-page {
                    font-weight: bold;
                }

                li a {
                    text-decoration: none;
                    font-size: 1.2rem;
                    color: var(--text-accent);
                    transition: color .2s ease-in-out;

                    &:hover {
                        color: oklch(0.2294 0.0888 165);
                    }
                }
            }
        }
    }

    main {
        padding-bottom: 1rem;

        .button {
            a {
                display: inline-block;
                padding: .65rem 1.2rem;

                text-decoration: none;
                background-color: var(--bg-light);
                color: var(--text-accent);
                transition: background-color .2s ease-in-out;
                border-radius: 12px;

                &:hover {
                    background-color: oklch(0.7908 0.006 161);
                }
            }
        }
        .dark-button {
            a {
                display: inline-block;
                padding: .65rem 1.2rem;

                text-decoration: none;
                background-color: oklch(0.8 0.006 161);
                color: var(--text-accent);
                transition: background-color .2s ease-in-out;
                border-radius: 12px;

                &:hover {
                    background-color: oklch(0.7908 0.006 161);
                }
            }
        }

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


        img.profiel {
            width: 80%;
            max-width: 30rem;
            aspect-ratio: 1/1;
            border-radius: 50%;
            object-fit: cover;
        }

        .card {
            padding: 0;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            list-style: none;
            text-decoration: none;


            li {
                display: flex;
                flex-direction: column;

                img {
                    order: -1;
                }

                img.studies {
                    height: 30%;
                    width: auto;
                }
            }

            > * {
                flex-basis: 18rem;
                box-shadow: 0 0 .2rem oklch(0 0 0/ .2), 0 0 2rem oklch(0 0 0/ .1);
                border-radius: 5%;
                overflow: hidden;
                position: relative;
                background-color: var(--bg-light);
                transition: transform 0.3s ease, box-shadow 0.3s ease;

                &:hover{
                    transform: scale(1.05);
                    box-shadow: 0 0 .4rem oklch(0 0 0/ .3), 0 0 3rem oklch(0 0 0/ .2);
                }
            }

            .content {
                margin: 1rem;

                a {
                    color: oklch(0 0 165);
                }

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

                .not-overlay-link {
                    position: relative;
                    z-index: 2;
                }
            }
        }

        .middel {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            padding: 0 1rem;

            .card {
                padding: 2rem;
                max-width: 36rem;
                width: 100%;

                > * {
                    flex-basis: 30rem;
                }

                .content {
                    margin: 2rem;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
            }
        }

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

                img {
                    width: 5rem;
                    height: auto;
                }
            }
        }

        .link {
            color: var(--text-accent);
            transition: color .2s ease-in-out;

            &:hover {
                color: oklch(0.2294 0.0888 165);
            }

        }

        form {
            max-width: 60rem;
            margin-top: 2rem;

            > div:not(.contact) {
                margin-bottom: 1.5rem;
                display: flex;
                flex-direction: column;
            }
        }

        .contact {
            position: relative;
            margin: 2rem 0;
            padding-top: 1.2rem;

            input,
            textarea {
                width: 100%;
                padding: 1.8rem 0.5rem 0.5rem;
                border: none;
                border-bottom: 2px solid oklch(0.73 0 0);
                background-color: oklch(1 0 238.76);
                outline: none;

                &:focus + label,
                &:valid + label {
                }
            }

            label {
                position: absolute;
                top: 1.8rem;
                left: 0.5rem;
                font-size: 1rem;
                color: oklch(0.2 0 0);
                pointer-events: none;
                transition: all 0.25s ease;
                z-index: 1;
            }

            input:focus + label,
            input:valid + label,
            textarea:focus + label,
            textarea:valid + label {
                top: 0;
                font-size: 0.75rem;
                color: var(--text-accent);
            }

            input::placeholder,
            textarea::placeholder {
                color: transparent;
            }

            textarea {
                min-height: 120px;
                resize: vertical;
            }
        }

        .contact-radios {
            border: 2px solid #aaa;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 2rem;

            legend {
                font-weight: bold;
                padding: 0 0.5rem;
                color: var(--text-accent);
            }

            .radio-group {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 1rem;

                input[type="radio"] {
                    width: auto;
                    height: auto;
                    accent-color: var(--bg-light);
                    cursor: pointer;
                }

                label {
                    margin-left: 0.25rem;
                    cursor: pointer;
                    font-size: 1rem;
                    color: oklch(0.32 0 0);
                }
            }
        }

        #btnSubmit {
            margin-top: 1.5rem;
            display: inline-block;
            padding: 0.65rem 1.2rem;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 500;
            text-align: center;
            text-decoration: none;
            background-color: var(--bg-light);
            color: var(--text-accent);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;

            &:hover {
                background-color: oklch(0.7908 0.006 161);
            }
        }

        .messages {
            padding: 2rem 1rem;

            h1 {
                text-align: center;
                margin-bottom: 2rem;
                color: var(--text-accent);
            }

            .messages-list {
                list-style: none;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 1.5rem;

                .message-card {
                    background-color: oklch(1 0 238.76);
                    border-radius: 12px;
                    box-shadow: 0 0 .2rem oklch(0 0 0/ .2), 0 0 2rem oklch(0 0 0/ .1);
                    padding: 1.5rem;

                    .content p {
                        margin: 0.5rem 0;
                    }

                    .content strong {
                        color: var(--text-accent);
                    }

                    .content em {
                        font-style: italic;
                        font-size: 0.9rem;
                    }
                }
            }
        }
    }

    footer {
        background-color: var(--bg-light);

        p:last-child {
            margin: 0;
        }
    }
}

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

@media (min-width: 600px) {
    body {
        p {
            font-size: 1.125rem;
        }

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

                nav {
                    ul {
                        flex-direction: row;
                        gap: 1rem;

                        li {
                            a {
                                font-size: 1.25rem;
                                transition: font-size 0.2s ease-in-out;

                            &:hover {
                                font-size: 1.6rem;
                            }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 650px) {
    .cards li {
        flex: 0 1 calc(30% - 3rem);
        max-width: 18rem;
    }
    .bedankt{
        h1{
            font-size: 3rem;
        }
        p{
            font-size: 1.5rem;
        }
    }
}

@media (min-width: 1200px) {
    body {
        p {
            font-size: 1.25rem;
        }

        header .container nav ul li a {
            font-size: 1.5rem;
        }
    }
}