#wat{
padding-left: 25rem;
padding-right: 25rem;
align-items: center;
}
#wat img{
 width: 3rem;
 height: auto;
 transform: rotate(10deg);
}
#waarom{
display: block;
}
#waarom img{
    width: 1.3rem;
}

#overons{
    justify-content: center;
}
#overons img{
    width: 14rem;
    border-radius: 15px;
    margin-right: 1rem;
}


button {
    color: rgb(253, 246, 229);
    background-color: rgb(5, 131, 162);
    font-size: 1rem;
    font-weight: lighter;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
   border-radius: 12px;
   border-color: rgb(228, 184, 211);

}
#maze{
    width: 1rem;
}

.roze{
    background-color: rgb(241, 225, 238);
}

.roze h2{
    color: rgb(228, 184, 211);
}
.roze p{
    color: rgb(0, 125, 176);
}

form {
    color: rgb(253, 246, 229);
    justify-self: center;
    border-radius: 12px;
    padding: 2rem;
    font-family: "Ubuntu", serif;
    background-color: rgb(5, 131, 162);
    border: 3px solid rgb(228, 184, 211);
    margin-bottom: 3rem;
}

form button{
background-color: rgb(253, 246, 229);
color: rgb(5, 131, 162);
}
form div{
    margin: 0.5rem;
}
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.field {
    display: flex;
    flex-direction: column;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
    background-color: rgb(5, 131, 162);
    border: 2px solid rgb(253, 246, 229); 
    color: rgb(253, 246, 229); 
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: "Ubuntu", serif;
}

input::placeholder {
    color: rgba(253, 246, 229, 0.7);
}

label{
    display: block;
}

select {
    font-size: 1.3rem;
    width: 100%;
    margin-top: 1rem;
}
input{
    display: inline;
    width: auto;
}


iframe{
    justify-items: center;
    margin-top: 2rem;
    margin-left: 15rem;
    margin-bottom: 2rem;
}



Header {
    background-color: rgb(253, 246, 229);
    Position: sticky;
    Left: 0;
    Top: 0;
    Z-index: 1;
}




a{
    font-weight: bold;
    text-decoration: none;
    color: darkcyan;
}

#collegas img {
    width: 10rem;
    height: auto;

}

 
ul img {
    width: 37rem;
    border-radius: 16%;
    flex-wrap: wrap;
}


body {
    font-size: calc(0.7rem + 0.4vw);
    background-color: rgb(253, 246, 229);
}

#MAZE{
    width: 13rem;
}

#wormkoek{
    width: 10rem;
    margin-left: 2rem;
}
article {
    font-family: "ohno-softie-variable", sans-serif;
    font-variation-settings: "wght" 300;
    padding-left: 20rem;
    padding-right: 20rem;
    padding-top: 3rem;
    padding-bottom: 3rem;

    display: flex;
}



nav {
    justify-items: center;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 5rem;
    padding-bottom: 1rem;
    padding-left: 6rem;
    padding-right: 6rem;
    padding-top: 3rem;
    
}

nav img {
    width: 5rem;
    height: auto;
    margin-bottom: 0rem;
    margin-top: 0.5rem;
     text-decoration: none;
}

nav a {
    color: rgb(0, 125, 176);
    margin: 3rem;
    font-size: 1.25rem;
    font-family: "ohno-softie-variable", sans-serif;
font-variation-settings: "wght" 600;
}
#koekje{
    margin-right: 1rem;
}

#checkbox{
    display: flex;
}
h1 {
    font-size: 4rem;
    font-family: "synthemesc", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin-bottom: 2rem;
    color: rgb(0, 125, 176);

}

#smaken{
    display: block;
    justify-items: center;
}
h2 {
    font-size: 3rem;
    font-weight: bold;
  color: rgb(5, 131, 162);
  margin-bottom: 1rem;
font-family: "museo-sans", sans-serif;
font-weight: 700;
font-style: normal;
}

footer {
    background-color: rgb(253, 246, 229);
    padding: 3.5rem;
    color: rgb(5, 131, 162);
    justify-items: center;
font-family: "ohno-softie-variable", sans-serif;
font-variation-settings: "wght" 300;
    font-style: normal;
    font-size: 0.75rem;
}

footer a {
    text-decoration: none;
    color: rgb(228, 184, 211);
    /*ik moest er toch ergens hotpink in stoppen :)*/
    font-weight: bold;
}

ul {
    display: flex;
    align-items: center;
}

li {
    margin-left: 4rem;

}

ul a {
    text-decoration: none;
    font-weight: bold;
}



.bold {

    font-weight: bold;
}



.why {
    text-align: center;
    padding: 6rem 2rem;
    background-color: #fbf5e9;
}

.why h2 {
    color: #2f7da6;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    font-family: "museo-sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.why-box {
    background-color: #f1e4f2;
    border-radius: 20px;
    padding: 3rem;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;

    max-width: 900px;
    margin: 0 auto;
}

.why-item {
    display: flex;
    align-items: center;
    gap: 1rem;

    color: #c9a3c4;
    font-size: 1.1rem;
}

.icon {
    font-size: 1.5rem;
}


#smaken img{
height: 20rem;
margin: 0.5rem;
border-radius: 15px;
border-width: 3px;
border-color: rgb(0, 125, 176);
border-style: solid;

}



@media (max-width: 800px) {

    article {


    font-family: "ohno-softie-variable", sans-serif;
    font-variation-settings: "wght" 300;

    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 3rem;
    display: block;
    justify-items: center;
}

nav {

    font-weight: 400;
    margin-bottom: 0rem;
    padding-bottom: 1rem;
    background-color: rgb(241, 225, 238);
}


nav img {
    height: auto;
    margin-bottom: 0rem;
    margin-top: 0.5rem;
}

nav a {
    color: rgb(0, 125, 176);
    margin: 1rem;
    font-size: 1.25rem;
    font-family: "ohno-softie-variable", sans-serif;
    font-variation-settings: "wght" 600;
}
ul{
    display: block;
    padding: 1rem;
    justify-items: center;
}

h1 {
    font-size: 3rem;
font-family: "synthemesc", sans-serif;
font-weight: 400;
font-style: normal;
    text-align: center;
    margin-bottom: 1rem;
}
.why-box{
    display: block;
    padding: 1rem
}

h2 {
    font-size: 2rem;
    font-weight: bold;
  color: rgb(5, 131, 162);
}

#wat{
padding-left: 2rem;
padding-right: 2rem;
align-items: center;
}

#wat img{
 transform: rotate(90deg);
}


.why-item{
   margin: 1rem;
}

#smaken img{
width: 20rem;
height: auto;
margin: 0.5rem;
border-radius: 15px;
border-width: 3px;
border-color: rgb(0, 125, 176);
border-style: solid;
}
#bekijk{
    display: block;
}
}