@import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Display&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Display&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: rgb(119, 185, 110);
    color: rgb(8, 42, 17);
    margin: 0;
}

p{
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    width: 50%;
}

h1,h2,h3,h4,h5{
    font-family: "Momo Trust Display", sans-serif;
}

header,footer{
    background-color: rgb(8, 42, 17);
    color: rgb(119, 185, 110);
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    margin: 0;
    text-align: center;
}

header p{
    font-size: 1.5rem;
}

header nav ul li{
    display: inline-block;
    list-style: none;
    padding-right: 1.5rem;
}

footer ul li{
    display: inline-block;
    list-style: none;
    padding-right: 1rem;
}

header img{
    width: 2.5rem;
    aspect-ratio: 1/1;
}

footer img{
    width: 2rem;
    aspect-ratio: 1/1;
}

footer p{
    font-size: 0.8rem;
    width: 100%;
}

ul{
    padding: 0;
}

a{
    font-family: "Momo Trust Display", sans-serif;
    text-decoration: none;
    color: rgb(119, 185, 110);
}

a:hover{
    color: white;
    text-decoration: underline;
}

h1{
    font-size: 3rem;
    margin: 0;
}

h2{
    padding-bottom: 0.5rem;
}

main{
    width: 70%;
    margin: auto;
    padding-top: 5rem;
}

article{
    background-color: rgb(8, 42, 17);
    color: rgb(119, 185, 110);
    padding: 3rem;
    margin-bottom: 3rem;
    border-radius: 2rem;
}

article img{
    width: 100%;
    border-radius: 2rem;
}

.midden{
    text-align: center;
}

.midden p{
    width: 50%;
    padding-left: 25%; 
}

.persoon{
    width: 20%;
    text-align: center;
    margin-bottom: 3rem;
}

.persoon p{
    width: 100%;
}

.persoon img{
    aspect-ratio: 1/1;
    margin-bottom: 1rem;
}

div.about{
    display: flex;
    justify-content: space-between;
}

.contact{
    text-align: center;
    padding-bottom: 3rem;
}

.contact p{
    width: 100%;
}

.contact ul li{
    list-style: none;
}

.blog img{
    margin: 2rem 0rem;
}

.blogdiv{
    display: flex;
}

.blogdiv img{
    width: 30%;
    margin: 0;
    margin-right: 1.5rem;  
}

.blogtext{
    width: 50%;
    margin: 0;
    margin-right: 1rem;
}

.aanbod ul li{
    margin-left: 1rem;
}

.cursief{
    font-style: italic;
}

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

.formflex{
    margin: 1rem;
}

.reservatie{
    text-align: center;
}

label{
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
}

.uren{
    text-align: center;
}

.uren ul{
    list-style: none;
}

.uren p{
    width: 100%;
}

.menu p{
    margin-bottom: 2rem;
}


@media (max-width: 65rem){

header nav ul li{
    display: block;
}

article{
    border-radius: 1rem;
    padding: 1.5rem;
}

article img{
    border-radius: 1rem;
}

main{
    width: 80%;
}

div.about{
    display: block;
    justify-content: center;
}

.persoon{
    width: 50%;
    margin-left: 22%;
    text-align: center;
    margin-bottom: 5rem;
}

h2{
    text-align: center;
}

p{
    width: 100%;
}

.blogdiv img{
    width: 100%;
    margin: 2rem 0rem;
}

.blogdiv{
    display: block;
}

.blogtext{
    width: 100%;
    margin-right: 0;
}

}


@media (max-width: 35rem){
    main{
    width: 90%;
}

.persoon{
    margin-left: 20%;
}

p{
    width: 100%;
}

.midden p{
    width: 100%;
    padding-left: 0; 
}

}