:root {
    --clr-darkestest: rgb(188, 116, 53);
    --clr-darkest: rgb(206, 148, 97);
    --clr-dark: rgb(222, 160, 87);
    --clr-light: rgb(224, 216, 176);
    --clr-lightest: rgb(252, 255, 231);
}

@media only screen and (max-width: 700px) {
    .navbar ul {
        flex-direction: column;
        align-items: center;
    }

    .navbar a {
        width: 100%;
        text-align: left;       
    }
    #box2 img{
        width: 100%;       
    }
    #eten img{
        width: 100%;
    }
    .fotos img{
        width: 100%
    };
    
}

body {
    margin: 0%;
    background-color: var(--clr-lightest);
    font-family: 'Roboto', sans-serif;
    
}

.navbar ul {
    list-style-type: none;
    background-color: var(--clr-light);
    padding: 0px;
    margin: 0px;    
    width: 100%;
    display: flex;
    }

.navbar a {
    color: rgb(60, 54, 46);
    text-decoration: none;
    padding: 15px;
    display: block;
    text-align: center;
    font-size: 20px;
}

.navbar a:hover {
    background-color: rgb(205, 198, 164);
    color: rgb(60, 54, 46);
    text-shadow: 4px 3px 7px rgb(191, 182, 136);
    box-shadow: 4px 3px 5px rgb(170, 164, 135);
}



.container{
    font-size: large;
    color: gray;
}

#box1{
    background-image: url(images/dijkhuisjebuiten1.jpg);
    height: 90vh;
    background-position-x: center;
    background-attachment: scroll ;
    background-size: cover;
    display: flex;
}
#tekstvoorpagina{
    
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: end;    
}
.box1tekst h1{
    color: var(--clr-dark);
    text-align: center;
}
.box1tekst {
    background-color: rgba(45, 44, 44, 0.61);
    color: white;
    padding: 10px;
    margin-left: 20%;
    margin-bottom: 2%;
}
#box2{
padding: 2%;
padding-top: 50px;
padding-bottom: 60px;
background-color: rgb(252, 255, 231);
margin-left: 20px;
margin-right: 20px;
}

#box2 img{
    max-width: 250px;
    box-shadow: 2px 3px 5px gray;
    border-radius: 5px;
}
#box3 {
    margin-bottom: 40px;
    padding: 20px;
    border-top: 3px double;
    background-color: rgba(246, 246, 244, 0.634);
    font-size: medium;
}
.geschranktl{
    float: left;
    margin-right: 20px;
}
.geschranktr{
    float: right;
    margin-left: 20px;
}
footer {
    background-color: #e0e0e0;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: small;
}
.knopje{
    display: flex;
    justify-content: space-evenly;
    
}
.knopje a{    
    text-decoration: none;
    color: white;
    background-color: var(--clr-darkest);
    opacity: 80%;
    padding: 10px;
    border-radius: 1rem;
    box-shadow: 3px 3px 5px rgb(98, 97, 97);  
    border: 3px solid rgba(165, 120, 80, 0.653);
    
}
.knopje a:hover{
    opacity: 100%;
    padding: 12px;
}


.container h1{
color: var(--clr-darkestest);
}
.container h2{
    color: var(--clr-dark);
}
.container h3{
    color: var(--clr-darkest);
}
#ontspanning{
    margin: 20px;
    margin-bottom: 60px;
}
#ontspanning img{
    max-width: 100%;
    box-shadow: 3px 3px 5px rgb(98, 97, 97);
}
#locatie{
    margin: 20px;
    margin-bottom: 60px;
}
#eten{
    margin: 20px;
    margin-bottom: 60px;
}
#eten img{
    height: 300px;
    box-shadow: 3px 3px 5px rgb(98, 97, 97);
}
#huurinfo{
    margin: 20px;
    margin-bottom: 60px;
}
.verboden{
    background-color: white;
    display: flex;
    justify-content: space-evenly;
    color: rgb(203, 63, 63);
    border: 1px solid;
    box-shadow: 3px 3px 5px rgb(98, 97, 97);
}
#contact{
    margin: 20px;
    margin-bottom: 60px;
}
.contact{
    display: flex;
    flex-wrap: nowrap;
}

.material-symbols-outlined{
    padding: 1rem;
}

.afbeeldingen{
    display: flex;    
    flex-direction: row;
    justify-content: space-evenly;
   
    align-items: center;
    flex-wrap: wrap;
    align-content: space-around;
    align-content: flex-start;
    
    margin-block-end: 60px;   
    margin: 20px;
}

.fotos img{
    max-height: 500px;
}