body, html{
    font-family: 'ivymode', sans-serif;
    box-sizing: border-box;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
}

/* NAVIGATIE*/
#logo img{
 width: 150px;
 margin: 0;
 padding: 0;
 margin-left: 50px;
}

.nav-container{
    display: flex;
    background-color: #959e95;
    box-sizing: border-box;
    align-items: center;
}

.nav{
    margin-top: 0;
    padding: 40px 10px;
    flex: 1;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    gap: 30px;
    margin-right: 50px;
    display:flex;
    justify-content: flex-end;
}

.nav ul li a {
    text-decoration: none;
    color: rgb(228, 228, 228);
    padding: 8px 12px;
    font-weight: normal;
    text-transform: uppercase;
}

.nav ul li a.active {
    font-weight: bold;
    color: #ffffff;
}

/* CONTENT */
.page-content{
    display:flex;
    justify-content: space-around;
    margin: 200px 100px auto 100px;
    box-sizing: border-box;
    position: relative;
}

.beeldkader img{
    width: 500px;
    display:block;
}

.beeldkader{
    z-index: 1;
    margin: 0;
    padding: 0;
}

.tekstkader{
    position: relative;
    z-index: 2;
    line-height: 25px;
}

.tekst-wrapper{
    display:flex;
    align-items: flex-start;
    flex-direction:column;
    justify-content:space-between;
}

/* OPMAAK */
.tekstkader h1{
    font-family: 'bodoni-moda-variable';
    font-style: italic;
    font-variation-settings: "opsz" 11, "wght" 400;
    font-size: 50px;
}

.tekstkader p{
    font-size: 25px;
}

/* FOOTER */
.footer-container footer{
    align-self: flex-end;
}


/* RESPONSIVE */
@media only screen and (max-width: 1000px) {
    .page-content{
        flex-direction: column;
        box-sizing: border-box;
    }

    .tekstkader h1{
        line-height: 50px;
    }

    .beeldkader img{
        justify-content: flex-end;
    }

    .nav-container{
        flex-wrap: wrap;
    }

    .nav ul{
        justify-self: center;
    }

    #logo{
        margin: 0 auto;
    }
}