*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
a:visited{
    color: white;
}
li{
    list-style: none;
}
p{
    font-size: clamp(1rem, 1vw + 0.7rem, 3rem);
}
h2{
    font-size: clamp(2rem, 2vw + 1.4rem, 6rem);
    color: yellow;
}
#drop{
    display: none;
}
#titelmobile{
    color: white;
    font-size: clamp(0.5rem, 6vw + 1rem, 3rem);
    text-align: center;
}
#titeldesktop{
    color: white;
    font-size: clamp(3rem, 6vw + 1rem, 6rem);
    text-align: center;
}



body{
    min-height: 100vh;
    font-family: "Segoe UI", "Arial";
    background-color: hsl(0, 0%, 20%);
    color: white;
}
nav{
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
}
.desktopnav{
    display: none;
}
.desktopspacer{
    display: none;
}
.mobilelink{
    padding-bottom: 0.4rem;
}
.desktoplink{
    padding-right: 2rem;
}



.dropdownmenu{
    display: none;
}
.mobiletoggle{
        width: 100%;
        display: flex;
        height: 3.3rem;
        cursor: pointer;
        padding: 1rem;
}
[id^=drop]:checked + ul{
	    display: block;
        margin-left: 1rem;
        color: white;
}
.mobilespacer{
    padding-top: clamp(6rem, 20vw + 3rem, 8rem);
}
.desktopspacer{
    padding-top: clamp(9.5rem, 10vw + 5rem, 13rem);
}
.desktopmenu{
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    padding: 1rem;
    font-size: clamp(1rem, 1vw + 0.7rem, 3rem);
}
.desktopmenu :first-child{
    margin-right: auto;
}
nav a:hover{
    background-color: hsl(0, 0%, 22%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 100%;
}


.box{
    display: flex;
    justify-content: space-evenly;
    border: solid white clamp(0.1rem, 0.1vw + 0.1rem, 0.3rem);
    padding: clamp(0.5rem, 1vw + 0.5rem, 2rem);
    align-items: center;
    border-radius: 5vw;
    gap: clamp(1rem, 3vw + 1rem, 3rem);
    margin: clamp(0.5rem, 1.5vw + 0.3rem, 3rem);
}
.box p{
    word-break: break-word;
}
#boxright{
    flex-direction: row-reverse;
}
.grid-container{
    display: grid;
    gap: clamp(0.5rem, 1.5vw + 0.3rem, 3rem);
    margin: clamp(0.5rem, 1.5vw + 0.3rem, 3rem);
    justify-content: center;
}
[id^=grid-item]{
    border: solid white clamp(0.1rem, 0.1vw + 0.1rem, 0.3rem);
    border-radius: 5vw;
    padding: clamp(0.5rem, 1vw + 0.5rem, 2rem);
    background-color: hsl(0, 0%, 30%)
}
h3{
    font-size: clamp(2rem, 2vw + 1.4rem, 6rem);
    color: yellow;
    text-align: center;
}
.contactbody{
    background-image: url(img/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.contact-container{
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 0.5rem;
    border: solid white clamp(0.1rem, 0.1vw + 0.1rem, 0.3rem);
    padding: 20px;
    border-radius: 5vw;
    margin: clamp(0.5rem, 1.5vw + 0.3rem, 3rem);
    background-color: rgba(255, 255, 255, 0.1);
    width: clamp(1.2rem, 60vw, 84rem);
    justify-self: center;
}
input, textarea, button{
    background: transparent;
    color: white;
    font-size: clamp(1rem, 1vw + 0.7rem, 3rem);
    text-overflow: ellipsis;
    width: clamp(1rem, 50vw, 70rem);
    justify-self: center;
    border: clamp(0.05rem, 0.05vw + 0.05rem, 0.15rem) solid white;
}
form label{
    text-align: center;
    font-size: clamp(1rem, 1vw + 0.7rem, 3rem);
}
input::placeholder{
    color:grey;
    font-size: clamp(1rem, 1vw + 0.7rem, 3rem);
}
#input4{
    width: clamp(0.5rem, 25vw, 35rem);
    border-radius: 5vw;
    background-color: yellow;
    color: black;
    border: clamp(0.05rem, 0.05vw + 0.05rem, 0.15rem) solid black;
}
.gallery-container{
    display: grid;
    margin: clamp(0.5rem, 1.5vw + 0.3rem, 3rem);
    gap: 0.5rem;
}
.gallery-container img{
    width: 100%;
    height: auto;
    border: clamp(0.05rem, 0.05vw + 0.05rem, 0.15rem) solid white;
}
h4{
    font-size: clamp(1.5rem, 1.5vw + 1rem, 4.5rem);
    color: yellow;
}
h3{
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}















@media all and (min-width : 640px) {
    .mobilenav {
        display: none;
    }
    .mobilespacer{
        display: none;
    }
    .desktopnav {
        display: block;
    }
    .desktopspacer{
        display: block;
    }
    #grid-item1{
        grid-row: span 2;
    }
    #grid-item2{
        grid-column: span 2;
    }
    #grid-item4{
        grid-row: span 2;
    }
    #grid-item5{
        grid-row: span 2;
        grid-column: span 2;
    }
    #grid-item6{
        grid-row: span 2;
    }
    #grid-item7{
        grid-column: span 2;
    }
    #grid-item8{
        grid-row: span 2;
    }
    #grid-item9{
        grid-column: span 2;
    }
    .grid-container{
        grid-template-columns: repeat(4, 1fr);
    }
    .gallery-container{
        grid-template-columns: repeat(2, 1fr);
    }
    .voorstelling{
        margin: clamp(0.5rem, 1.5vw + 0.3rem, 3rem);
    }


}
@media all and (max-height : 400px){
    h1{
        display: none;
    }
}