body{
    margin: 0;
}

/*------------------------- TYPOGRAFIE -------------------------*/
h1{
    font-size: 40px;
    font-family: Casanova Serif Display;
    font-style: normal;
    font-weight: lighter;
}
h2{
    font-size: 26px;
    font-family: Casanova Serif Display;
    font-style: normal;
    font-weight: lighter;
    text-align: center;
}
h3{
    font-size: 23px;
    font-family: Casanova Serif Display;
    font-style: normal;
    font-weight: lighter;
}
h4{
    font-size: 21px;
    font-family: Casanova Serif Display;
    font-style: normal;
    font-weight: lighter;
}
p{
    font-size: 18px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-style: normal;
}


/*------------------------- KOMT VAAK TERUG -------------------------*/
a{
    text-decoration: none;
    color: black;
}

header{
    margin-top: 4em;
}

main > section{
    margin-bottom: 3em;
}
.sectie90{
    width: 90%;
    margin: auto;
    margin-bottom: 3em;
}


/*------------------ NAV ------------------------*/
nav{
    position: fixed;
    top: 0;
    margin-top: 0;
    z-index: 2;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.366);
    backdrop-filter: blur(5px);
}
#navBalk{
    display: grid;
    grid-template-columns: auto auto;
    height: max-content;
}

#navLogo{
    display: grid;
    grid-template-columns: max-content auto;
    gap: 0.3em;
    align-items: center;
    margin-left: 10%;
}
#navLogo > a > img{
    height: 2.5em;
}
#navLogo > h4:hover{
    width: max-content;
    background-color: #0000001a; 
}

#navRechts{
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-right: 10%;
}
#navTekst, #hambTekst{
    display: grid;
    grid-template-columns: max-content max-content max-content max-content max-content;
    align-items: center;
    text-align: center;
}
#hambTekst{
    display: none;
}
#navRechts > button{
    border: none;
    background-color: rgba(255, 255, 255, 0);
}
#navKnop{
    display: block;
}

#navTekst > a > h4, #hambTekst > a > h4{
    border-right: solid 3px #0000001a;
    padding-left: 0.3em; 
    padding-right: 0.3em;
    font-size: 14px;

}
#navTekst>a:hover, #hambTekst>a:hover{
    background-color: #0000001a; 
}



/*----------------------- QUOTE -------------------------*/
.tussenStuk{
    text-align: center;
    background-color: #f1d4dda1;
    padding: 1em;
    margin-bottom: 2em;
    font-size: 16px;
}

/*---------------------------- FOOTER -----------------*/
footer{
    background-color: #f1d4dda1;
    padding: 2em;
}


/*--------------------- GALLERY -------------------*/
.gallery > img, .gallery > video{
    height: 11em;
    border: white solid 3px;
    box-shadow: #b8b8b8 1px 1px 6px;
    transition: transform .5s;
}
.gallery > img:hover, .gallery > video:hover{
    transform: scale(1.1);
}

.gallery{
    margin-top: -1em;
    overflow: scroll;
    overflow-y: hidden;
    padding: 0.5em;
    white-space: nowrap;
    height: 12em;
}
/*--------------------- SCROLL BAR -------------------*/
.gallery::-webkit-scrollbar {
    height: 15px;
  }
  
.gallery::-webkit-scrollbar-track {
    background-color: #e2e2e2; 
    border-radius: 5px;
}

.gallery::-webkit-scrollbar-thumb {
    background: #ffffff; 
    border-radius: 5px;
    border: 3px solid #e2e2e2;
}

.gallery::-webkit-scrollbar-thumb:hover {
    background: #cecece; 
}

.gallery::-webkit-scrollbar-button{
    width: 30px;
    background-color: rgb(255, 255, 255);
}






/*----------------RESPONSIVE NAVIGATIE + HEADER------------------------*/  
/*hamburger menu tijd*/
@media screen and (max-width: 570px){
    #navTekst{
        display: none;
    }
    #navKnop{
        display: block;
    }
    #hideLogo{
        display: none;
    }    
}
/*geen honger meer*/ 
@media screen and (min-width: 570px){
    #navTekst{
        display: flex !important;
    }
    #navKnop{
        display: none;
    }
}
/*other stuff*/
@media screen and (min-width: 320px){
    #hideLogo{
        display: block;
    }
}


@media screen and (min-width: 680px){
    header{
        margin-top: 5em;
    }
}
@media screen and (min-width: 370px){
    header > h1::after{
        content: " Westerman";
    }
}