@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cagliostro&family=Concert+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
html{
    scroll-behavior: smooth;
}
body{
    width: 100%;
    height: 100%;
    /* background-color: #F9F1E8; */
    /* background-color: #fff7ed; */
    margin: 0;
    padding: 0;
}
header{
    height: 100%;
    position: fixed;
    top: 2em;
    z-index: 100;

}
#menuButton{
    /* background-color: #655E53; */
    /* background-color: #CEC2B6; */
    background-color:  #F9F1E8;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* grid-template-rows: 1fr;
    place-items: center; */
    width: 4em;
    height: 4em;
    padding: 0;
    border-radius: 50%;
    border: none;
    position: absolute;
    top: -1em;
    left: 1.4em;
    box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.25);

}
#menuButton span{
    /* color: red; */
    /* z-index: 9; */
    grid-column-start: 1;
    grid-row-start: 1;
    border-radius: 0.3em;
    background-color:  rgb(190, 129, 129);
    width: 2.4em;
    height: 0.28em;
    /* margin: 0.1em;
    margin-left: 0.3em; */
    align-self: center;
    display: block;
    transition: 0.4s;
    position: absolute;
    margin: 0;
    
}
#menuButton span:first-of-type{
    /* transform: translateY(-0.4em); */
    
    /* transition: transform 0.3s ease;
    transform-origin: right; */
    
    /* transform: translateY(-0.8em); */
    transform: translateY(-0.7em);

}
#menuButton span:last-of-type{
    /* transform: translateY(0.4em);
    transform-origin: left;
    transition: transform 0.3s ease; */
    transform: translateY(0.7em);
 
}
#menuButton span:nth-of-type(2) {
    /* transform: translateY(-0.4em); */
    transform: translateY(-0.23em);
}

#menuButton span:nth-of-type(3) {
    /* transform: translateY(0.4em); */
    transform: translateY(0.23em);
}

#menuButton.navOpen span:first-of-type,
#menuButton.navOpen span:last-of-type {
    transform: scaleX(0);
}

#menuButton.navOpen span:nth-of-type(2) {
    transform: rotate(45deg) translate(0, 0);
}

#menuButton.navOpen span:nth-of-type(3) {
    transform: rotate(-45deg) translate(0, 0);
}


header nav.toonMenu {
	transform: translateY(0em);
    visibility: visible; /* Maakt het menu zichtbaar */
	/* border-radius: 0; */
    /* height: auto; */
}
header nav {
    width: 6em;
    /* height: auto; */
    height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;	
	transform: translateX(-100%);
    transition: transform 0.6s ease; 
    visibility: hidden; 
    position: absolute;
    top: 3em;
    
    
    /* padding: 1em 2em; */
    /* transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out; */
}

header nav ul{
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    list-style: none;
    padding: 0;
    gap: 0.2em;
    position: relative;
    margin: 0;
    
}
header nav ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 3.5em;
    height: 3.5em;
    /* background-color: rgb(190, 129, 129); */
    background-color: #fbf9f9;
    border-radius: 50%;
    /* align-self: center; */
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
    margin-bottom: 0.5em;
    box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.25);
    box-shadow:0em 0em 0.2em 0.2em #D1A18C;

}
header nav ul li a{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;


}
/* header nav ul li a:hover {
    background-color:  #CEC2B6;
    width: 3.5em;
    height: 1em;
    border-radius: 50%;
} */
.index-Nav svg{
    width: 2.3em;
    height: 2.3em;
    width: 2.6em;
    height: 2.6em;
    color: aliceblue;
    color: rgb(209, 161, 140);
    align-self: center;


}

/* main */
/* eerste section */
main {
    width: 100%;
    height: 100%;
}
main section {
    scroll-margin-top: 6em;
}
main section:first-of-type{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 5em;
    /* left: 0; */
    padding: 1em 2em;

}
main section:first-of-type div{
    display: flex;
    flex-direction: column;
    /* padding-bottom: 6em; */

}
main section:first-of-type div h1{
    color: #4c473f;
    /* font-family: "Montserrat", serif; */
    font-family: "Cagliostro", serif;
    font-size: 1em;
    align-self: center; 
    margin-top: 2em;  
}
main section:first-of-type div > span:first-of-type{
    /* color: #D1A18C; */
    color: rgb(190, 129, 129);
    font-size: 2em;
    align-self: center;
    font-weight: bold;
    /* font-family: "Indie Flower", serif; */
    font-family: "Cagliostro", serif;


}
main section:first-of-type div p {
    font-family: "Cagliostro", serif;
    align-self: center;
    font-size: 1em;
    color: #2a2722;
    font-weight: bold;
    /* align-self: center; */
    text-align: center;
}
main section:first-of-type div p span{
    color: rgb(190, 129, 129);
    font-family: "Cagliostro", serif;

}
main section:first-of-type img{
    width: 20em;
    height: auto;
    order: -1;
    align-self: center;
    position: relative;
    border-radius: 50%;
    

    /* margin-top: 3em; */
}
main section:first-of-type div ul{
    /* background-color: #2a2722; */
    display: flex;
    gap: 1em;
    justify-content: center;
    padding: 0%;
    margin-bottom: 2em;
    
}
main section:first-of-type div ul li{
    /* background-color: #D1A18C; */
    list-style: none;
    width: 3.6em;
    height: 3.6em;
    border-radius: 50%;
    display: flex; 
    justify-content: center;
    align-items: center;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
    box-shadow: 0em 0em 0.2em 0.2em #D1A18C;

 
}
main section:first-of-type div ul li svg{
    width: 2em;
    height: auto;
    color: #ffffff;
    color: #D1A18C;
}

/* tweede section */
main section:nth-of-type(2) {

    padding: 1em 2em;
    margin-top: 4em;
}
main section h2{
    color: rgb(190, 129, 129);
    font-family: "Cagliostro", serif;
    font-weight: bold;


}
main section:nth-of-type(2) p{
    color: #8a0d0d;
    font-size: 1em;
    /* font-family: "Cagliostro", serif; */
    font-family:'Jost', sans-serif;
    text-align:center;
    color: #4c473f;
    font-weight: bold;
    line-height: 1.7em;

}
/* derde section */
main section:nth-of-type(3){
    background-color: #f7f7f7;
    background-color:#F9F1E8;
    
    
    height: fit-content;
    padding: 1em 2em;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */

    
    /* position: relative; */

}
main section:nth-of-type(3) ul{
    /* background-color: #655E53; */
    list-style: none;
    margin: 0%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.3em;
    padding: 2em;   
}   
main section:nth-of-type(3) ul li{
    width: 4em;
    height: 4em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.5em;
    align-content: center;
    justify-content: center;
    background-color: #655E53;
    background-color: #D1A18C;
    border-radius: 20%;
    /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */   
}  
main section:nth-of-type(3) ul li p{
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    /* font-family: "Cagliostro", serif; */
    font-family:'Jost', sans-serif;
    margin: 0;
    color: #fafafa;
}  
main section:nth-of-type(3) ul li svg {
    width: 100%;
    height: 100%;
    align-self: center;
    color: #fafafa;
    order: -1; 
}
/* section 4 */
main section:nth-of-type(4){
    
    height: fit-content;
    padding: 1em 2em;
    
    
}
main section:nth-of-type(4) ul li h2{
    font-family: "Cagliostro", serif;
    font-size: 1.2em;
    font-weight: bold;
    order: 1;
    margin: 0;
}
main section:nth-of-type(4) h3{
    font-family: "Cagliostro", serif;
    font-size: 1.2em;
    font-weight: bolder;
    order: 1;
    margin: 2em;
    text-align: center;
    color: #D1A18C;
    


}
main section:nth-of-type(4) ul {
    height: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    flex-direction: row;
    flex-wrap: wrap;
}
main section:nth-of-type(4) > ul > li{
    width: 20em;
    height: 32em;
    list-style: none;
    background-color: #F9F1E8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
    padding: 1em;
    box-shadow: 4px 5px 0.5em rgba(0, 0, 0, 0.25);
    /* box-shadow: 0 0 0.5em rgb(134 151 168 / 45%); */
    border-radius: 1em;
}
main section:nth-of-type(4) ul li p{
    text-align: center;
    font-size: 1em;
    margin: 0;
    font-family: 'Jost', sans-serif;
    order: 3;
    font-weight: 400;
    /* font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif; */
}
main section:nth-of-type(4) ul li img{
    /* width: 20em;
    height: auto; */
    width: 100%;
    height: 15em;
    object-fit: cover;
    object-position: center;
    order: 2; 
    border-radius: 1em;
    box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.25);
}
main section:nth-of-type(4) ul > li:nth-of-type(3) img{
    object-fit: contain;
}
main section:nth-of-type(4) ul li ul:first-of-type{
    /* background-color: #8a0d0d; */
    /* order: 1; */
    display: flex;
    flex-direction: row;
    gap: 1em;
    order: 4;
    padding: 0;
    

}
main section:nth-of-type(4) ul li ul:first-of-type li{
    width: 5em;
    height: 2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #D1A18C;
    color: #fafafa;
    border-radius: 1em;
    /* box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.25); */
    font-weight: bold;
    font-size: 1em;
    padding: 0.2em;
    font-family:'Jost', sans-serif;
    font-weight: 500;
    /* font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif; */
}
main section:nth-of-type(4) ul li ul:nth-of-type(2){
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3em;
    order: 5;
    padding: 0;
    
}
main section:nth-of-type(4) ul li ul:nth-of-type(2) li{
    /* background-color: #b6b2bc; */
    width: 5em;
    height: 1em;
    padding: 0.5em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #fbf9f9;
    border: #09299c;
    border-radius: 1em; 
    box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0em 0em 0.2em 0.2em #D1A18C;
    font-weight: 300;
    font-size: 1em;
    font-family:'Jost', sans-serif;
    font-weight: 400;
    
    

    /* font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif; */

}
main section:nth-of-type(4) ul li > ul:nth-of-type(2) li > a{
    color: #a37d6d;

}
main section:nth-of-type(5){
   
    height: fit-content;
    padding: 1em 2em;
}
main section:nth-of-type(5) p{
   text-align: center;
   font-family: "Cagliostro", serif;
   font-size: 1.4em;
   color: rgb(190, 129, 129);
   font-weight: bold;
}
main section:nth-of-type(5) div{
    /* background-color: #cec8be; */
    background-color: #F9F1E8;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.25);
    width: 19.4em;
    height: 12em;
    margin: 0.5em auto 2em auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    border-radius: 1em;
}
main section:nth-of-type(5) div svg{
    width: 4.5em;
    height: auto;
    color: rgb(190, 129, 129);
    /* box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.25); */

    /* border: #2a2722; */
}
main section:nth-of-type(5) div a{
    color:rgb(190, 129, 129);
    color: #a37d6d;
    font-weight: bold;
    font-family: "Cagliostro", serif;
}
footer{
    
    height: fit-content;
    padding: 1em 2em;
    /* background-color: #959bb3; */
    background-color: #F9F1E8;
    box-shadow: 0 0 0.8em 0.1em rgb(190, 129, 129);


}

footer p{
    text-align: center;
    font-family: "Cagliostro", serif;
    font-weight: 500;
}

@media (min-width: 1028px) {
    /* header{
        width: 5em;
        height: 100vh;
        display: grid;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
    } */
    header {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 6em; /* Breedte van de zijbalk */
        /* background-color: #655E53;
        background-color:  #CEC2B6; */
        background-color: #F9F1E8;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2em 0;
        /* overflow: hidden; */
        box-shadow: 0 0 0.8em 0.1em rgb(190, 129, 129);
    }
    header nav {
        width: 100%; /* Neem de volledige breedte van de zijbalk */
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2em; 
        background-color: transparent;
        transform: translate(0);
        transition: none;
        visibility: visible;
        /* overflow: hidden; */
        position: relative;
        top: auto;

    }

    header nav ul {
        display: flex;
        flex-direction: column; 
        align-items: center;
        list-style: none;
        gap: 1.5em;
        z-index: 4444;
    }

    header nav ul li {
        display: flex;
        width: 100%;
        z-index: 55555;
        width: 3em;
        height: 3em;
        
    }

    header nav ul li a {
        /* color: white; */
        text-decoration: none;
        font-size: 1.2em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 1em 0;
        z-index: 55555555;

        /* transition: background-color 0.3s ease; */
    }

    header nav ul li:hover {
        background-color: #b6b2bc;
        background-color: rgb(190, 129, 129); 
        /* width: 3em;
        height: 3em; */
        /* border-radius: 50%; */
    }
    .index-Nav svg {
        width: 1.8em;
        height: auto;
        fill: white;
        /* align-self: center; */
    }
    #menuButton {
        display: none; /* Verberg de menu-knop op desktop */
    }
    
    main{
        width: calc(100% - 6em);
        margin-left: 6em;
    }
    /* main section{

    } */
    main section:first-of-type{
        display: flex;
        flex-direction: row;
       

    }
    main section:first-of-type div{
        width: 40em;
    }
    main section:first-of-type div ul li:hover{
        background-color: rgb(190, 129, 129);
    }


    main section:first-of-type div h1{
        margin: 0;
        font-size: 1.5em;
    }
    main section:first-of-type div > span:first-of-type{
        font-size: 4em;
    }
    main section:first-of-type div p{
        text-wrap: balance;
        font-size: 1.4em;
    }
    main section:first-of-type img{
        width: 30%;
        height: auto;
        margin: 0;
    }
    main section:nth-of-type(2){
        display: flex;
        flex-direction: column;
    }
    main section h2 {
        font-size: 2em;
        color: rgb(190, 129, 129);
        font-family: "Cagliostro", serif;

    }
    main section:nth-of-type(2) p {
        font-size: 1.1em;
        /* color: #8a0d0d;
        background-color: #655E53; */
        /* text-align: left; */
    }

    main section:nth-of-type(3){
        background-color:#F9F1E8;

    }
    main section:nth-of-type(5) div{
        width: 22em;

    }
   footer{
    position: relative;
    z-index: 100000;
    width: calc(100% - 10em);
    margin-left: 6em;
    box-shadow: none;
   }
   


}