@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

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


:root {
    --white: oklch(0.9961 0 130.86);
    --yellow: oklch(0.8382 0.1579 93.18);
    --dark_yellow: oklch(0.6573 0.087774 83.1919);
    --black: oklch(0.1715 0.0447 152.4);
    --dark_green: oklch(0.4176 0.0271 155.05);
    --green: oklch(0.6869 0.0298 136.93);
    --mint: oklch(0.9552 0.0709 154.14);
    --blue: oklch(0.6276 0.1066 196.94);
    font-family: "Open Sans", sans-serif;
    font-size: 1.5em;
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;

}

header{
    color: var(--white);
    background-color: var(--blue);
    padding-bottom: 2rem;
    margin: -.35rem;
    div{
        display: flex;
        flex-direction: column;
        section{
            display: flex;
            flex-direction: column;
            nav{
                ul{
                    display: flex;
                    flex-direction: column;

                    li{
                        list-style: none;
                        align-items: center;
                        justify-content: center;
                        .login {
                            color: var(--black);
                            background-color: var(--yellow);
                            margin-block: .5rem;
                            border-radius: 1rem;
                            padding-inline: 1rem;
                            &:hover {
                                background-color: var(--dark_yellow);
                                color: inherit;
                            }
                            svg {
                                align-items: center;

                            }
                        }
                        a{
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            text-decoration: none;
                            color: inherit;
                            &:hover {
                                color: var(--green);
                            }
                        }
                    }
                }
            }
        }
        .title {
            display: flex;
            flex-direction: column;
            max-width: 80vw;
            h1 {
                font-size: 1.5rem;
            }
            input {
                width: 80vw;
                font-size: 1rem;
            }
            a {
                background-color: var(--yellow);
                color: var(--black);
                text-decoration: none;
                padding-block: .5rem;
                padding-inline: 1rem;
                border-radius: 1rem;
                margin-block: 1rem;
                max-width: 50vw;
                justify-content: center;
                &:hover {
                    background-color: var(--dark_yellow);
                }
            }
        }
    }
}

main{
    div {
        h2 {
            font-weight: 500;
        }
        .filter {
            div {
                display: flex;
                flex-direction: column;
                justify-content: start;
                border: 2px var(--black) solid;
                margin-bottom: 1rem;
                padding-bottom: 1rem;
                padding-inline: 1rem;
                border-radius: 1rem;
                input {
                    min-height: 3vh;
                }
            }
        }
        .fotografen {
            .cards-fotgrafen {
                div {
                    background-color: var(--dark_green);
                    color: var(--white);
                    list-style: none;
                    align-items: center;
                    justify-content: center;
                    padding-inline: 2rem;
                    padding-block: 2rem;
                    margin-bottom: 1rem;
                    border-radius: 1rem;
                    max-width: 90vw;
                    height: auto;
                    img {
                        order: 1;
                        margin-inline-start: -2rem;
                        width: 100vw;
                        height: auto;
                    }
                    ul {
                        order: 3;
                        li{
                            list-style: square;
                            margin-block: .5rem;
                        }
                    }
                    h2 {
                        order: 2;
                        align-items: center;
                    }
                    p {
                        order: 4;
                    }
                    a {
                        order: 5;
                        background-color: var(--yellow);
                        color: var(--black);
                        text-decoration: none;
                        padding-block: .5rem;
                        padding-inline: 1rem;
                        border-radius: 1rem;
                        margin-block: 1rem;
                        &:hover {
                            background-color: var(--dark_yellow);
                        }
                    }
                }
            }
        }
        section{
            h2 {
                font-weight: 500;
            }
            img{
                max-width: 80vw;
                height: auto;
            }
        }
        .overons {
            margin-inline: -1.35rem;
            display: flex;
            flex-direction: column;

            padding: 1rem;

            .info {
                background-image: url("../images/overonsBG.png");
                background-size: cover;
                margin-inline: -1rem;
                padding: 1rem;
                color: var(--white);
                max-width: 100vw;

                h2 {
                    color: var(--yellow);
                }

                p {
                    align-items: center;
                    justify-content: center;
                }
            }
            .cards-homepage {
                background-image: linear-gradient(to bottom, var(--black) 30%, var(--white));
                padding: 1rem;
                margin-inline: -1rem;
                ul {
                    display: flex;
                    flex-direction: column;
                    li {
                        border-radius: 1rem;
                        background-color: var(--green);
                        color: var(--black);
                        list-style: none;
                        align-items: center;
                        justify-content: center;
                        padding-inline: 2rem;
                        padding-block: 2rem;
                        margin-bottom: 1rem;
                        margin-inline-start: -1.5rem;
                        h3 {
                            color: var(--black);
                            align-items: center;
                        }
                        a {
                            background-color: var(--yellow);
                            color: var(--black);
                            text-decoration: none;
                            padding-block: .5rem;
                            padding-inline: 1rem;
                            border-radius: 1rem;
                            margin-block: 1rem;
                            &:hover {
                                background-color: var(--dark_yellow);
                            }
                        }
                    }

                }
            }
        }
    }
}

footer{
    background-color: var(--dark_green);
    color: var(--white);
    margin: -.35rem;
    padding-block: 1rem;
    div.container{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        div{
            display: flex;
            flex-direction: column;
            iframe {
                max-width: 80vw;
                height: auto;
                min-height: 30vh;
            }
            input{
                background-color: var(--mint);
                border-style: none;
                min-height: 3vh;
                max-width: 70vw;
            }
            textarea {
                background-color: var(--mint);
                border-style: none;
                max-width: 70vw;
                min-height: 8vh;
                max-height: 8vh;
            }
            button {
                background-color: var(--yellow);
                color: var(--black);
                text-decoration: none;
                padding-block: .5rem;
                padding-inline: 1rem;
                border-radius: 1rem;
                margin-block: 1rem;
                border-style: none;
                max-width: 50vw;
                &:hover {
                    background-color: var(--dark_yellow);
                    color: var(--white);
                }
            }
        }
    }
    
}

@media (min-width: 48rem) {
    header{
        div{
            display: flex;
            flex-direction: column;
            section{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                nav{
                    ul{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 1rem;
                        li{
                            a{
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                            }
                        }
                    }
                }
            }
            .title {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                max-width: 45vw;
                align-items: center;
                h1 {
                    font-size: 2rem;

                }
                input {
                    width: 32vw;
                    max-height: 10vh;
                    min-height: 5vh;
                    font-size: 1rem;
                }
                a {

                }
            }
        }
    }

    main{
        z-index: 1;
        div {
            section {
                display: flex;
                flex-direction: row;
            }
            .overons {
                .cards-homepage {
                    ul {
                        display: flex;
                        flex-direction: row;
                        li {
                            margin-inline: 1rem;
                        }
                    }
                }
            }
            .filter {
                display: flex;
                flex-direction: column;
                max-width: 25vw;
            }
            .fotografen {
                .cards-fotgrafen {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 2rem;
                    div {
                        max-width: 25vw;
                        img {
                            width: 25vw;
                        }
                    }
                }
            }
        }
    }

    footer{
        div.container{
            display: flex;
            flex-direction: row;
            gap: 1rem;
            div{
                display: flex;
                flex-direction: column;
                padding-inline: 2rem;
                iframe {

                }
                input {
                    max-width: 20vw;
                    min-height: 3vh;
                }
                textarea {
                    max-width: 20vw;
                }
                button {
                    max-width: 20vw;
                }
            }
        }
    }
}