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

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

:root {
    font-family: "OpenSans", Arial, sans-serif;
    scroll-behavior: smooth;
    --wit: oklch(0.99 0.003 325);
    --zwart: oklch(0.25 0.01 325);
    --donker: oklch(0.2029 0.0538 144);
    --grijs: oklch(0.3601 0.0273 220.06);
    --primary: oklch(0.7964 0.0946 83.1919);
    --secondary: oklch(0.8 0.0291 136.93);
    background-color: var(--wit);
    color: var(--zwart);
}
.container {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
a{
    text-decoration: none;
    color: var(--wit);
}
header  {
    padding-block-start: 5rem;
    padding-inline: 3rem;
    background: transparent;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    a{
        font-size: 3rem;
        font-weight: bold;
        text-shadow: 0 0 0.2rem var(--zwart);
    }
    nav {
        ul{
            list-style: none;
            display: flex;
            gap: 4rem;
            align-items: center;
            li{
                a{
                    font-size: 1.5rem;
                    font-weight: bold;
                }
            }
        }
    }
}
main {
    .hero{
        background: url("../resources/achtergrond.jpg");
        height: 45rem;
        background-size: cover;
        background-position: center;
        padding-block-start: 20rem;
        padding-block-end: 10rem;
        padding-inline-start: 7rem;
        font-size: 1.7rem;
        h1{
            width: 50%;
            color: var(--wit);
        }
        input{
            width: 25rem;
            height: 3rem;
            border-radius: 0.7rem;
            padding-inline: 0.5rem;
        }
        div{
            display: flex;
            align-items: center;
            gap: 1rem;
        }
    }

    .introductie{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-block:2rem;
        img{
            width: 22rem;
            height: 25rem;
            object-fit: cover;
            object-position: center;
            border-radius: 0.8rem;
        }
        p{
            width: 40rem;
        }
    }

    .over-ons {
    position: relative;
        width: 100%;
        padding-block:4rem;
        img {
            position: absolute;
            object-fit: cover;
            object-position: bottom;
            z-index: -1;
            inset: 0;
            width: 100%;
            height: 100%;
            filter: brightness(0.5);
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:1.3rem;
        h2{
            text-align: center;
            font-size: 2rem;
            color: var(--primary);
        }

        p{
            padding-inline: 20rem;
            color: var(--wit);
        }
    }
    .fotografen{
        background: linear-gradient(to bottom, var(--donker), var(--wit));
        ul{
            display: flex;
            gap: 1rem;
            margin-inline: 6rem ;
            padding-block: 4rem;
            list-style: none;
            li{
                border-radius: 0.7rem;
                background: var(--secondary);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-inline: 1.5rem;
                padding-block-end: 1.5rem;
                h3{
                    color: var(--primary);
                    font-size: 2rem;
                    text-align: center;
                    margin-block: 2rem;
                }
                p{
                    color: var(--wit);
                    margin-inline: 1rem;
                    margin-block-end: 2rem;
                }
                a{
                    align-self: self-end;
                    margin-inline: 1rem;
                }
            }
        }
    }
    .zoekpagina{
        margin-block-end: 5rem;
        h2{
            text-align: center;
            margin-block: 4rem;
        }
        ul{
            list-style: none;
        }
        &>div{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 5rem;
            margin-inline: 2rem;
            .tags{
                display: flex;
                flex-direction: column;
                gap: 1rem;
                div{
                    display: flex;
                    gap: 1rem;
                    input{
                        width: 5rem;
                    }
                }
                ul{
                    margin-inline-start: 1rem;
                }
            }
            .keuzes{
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2rem;
                    li {
                        width: 40%;
                        border-radius: 1.5rem;
                        background-color: var(--secondary);
                        display: flex;
                        flex-direction: column;

                        img {
                            height: 15rem;
                            width: 100%;
                            object-fit: cover;
                            object-position: center;
                            border-top-left-radius: 1.5rem;
                            border-top-right-radius: 1.5rem;
                            order: -1;
                        }
                        h3{
                            color: var(--wit);
                            padding-inline:1rem;
                            padding-block:1rem;
                            background-color: var(--donker);
                        }
                        ul{
                            display: flex;
                            flex-direction: column;
                            padding-inline:2rem;
                            padding-block: 1rem;
                            li{
                                width: 100%;
                                p {
                                    font-style: italic;
                                }
                            }

                        }
                        p{
                            margin-inline:1rem;
                        }
                        a {
                            align-self: self-end;
                            display: inline-block;
                            margin-block-start: auto;
                        }
                    }
                }
            }
        }
    }
    .sorry{
        background-color: var(--zwart);
        padding-block: 20rem;
        p{
            margin-inline: auto;
            text-align: center;
            width: 30%;
            background-color: var(--secondary);
            color: var(--zwart);
            padding: 1rem;
            span{
                color: var(--zwart);
                font-weight: initial;
                text-decoration: underline;
            }
        }
    }
}
footer{
    background-color: var(--donker);
    ul{
        list-style: none;
        display: flex;
        margin-inline: 3rem;
        gap: 2rem;
        padding-block: 3rem;
        justify-content: space-between;
        li{
            display: flex;
            flex-direction: column;
            width: 30%;
            h3{
                color: var(--wit);
                font-size: 2.2rem;
                height: 7rem;
            }
            input{
                height: 2rem;
                margin-block-end: 2rem;
            }
            textarea{
                font-family: OpenSans;
                padding-block-start: 0.5rem;
                padding-block-end: 7rem;
                border-radius: 0.5rem;
                background-color: var(--wit);
                text-align: start;
                padding-inline: 0.5rem;
            }
            input{
                border-radius: 0.5rem;
                background-color: var(--wit);
                padding-inline: 0.5rem;
            }
            img{
                width: 100%;
            }
            button{
                margin-block-start: auto;
                align-self: self-end;
            }
        }
    }
}
.hidden{
    display: none;
}
span{
    font-weight: bold;
    color: var(--primary);
}
.zoek{
    background-color: var(--primary);
    color: var(--wit);
    padding: 1rem;
    border-radius: 0.7rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-style: solid;
    border-color: var(--donker);
}