/**************/
/* FONTS */
/**************/
@font-face {
    font-family: 'Medieval';
    src: url(../fonts/Canterbury.ttf);
}
@font-face {
    font-family: 'Poppins';
    src: url(../fonts/poppins/poppins_bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: 'Poppins';
    src: url(../fonts/poppins/poppins_light.ttf);
    font-weight: lighter;
}
@font-face {
    font-family: 'Poppins';
    src: url(../fonts/poppins/poppins_regular.ttf);
    font-weight: normal;
}

/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
  box-sizing:border-box;  
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
    --main-color-light: #F9EED0;
    --main-color-dark: #152A2F;
    --main-color: #44562b;
    --secondary-color: #D17527;
    --accent-color: #A21D10;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*********************/
/* MAIN PROPERTIES */
/*********************/
header {
    & nav {
        & ul {
            display: flex;
            gap: 2em;
            height: 6.5em;
            align-items: center;
            padding-left: 8em;
        }
    }
}

footer{
    & section{
        background-image: url("../images/takje.png") !important;
        background-position: left top 50px !important;
        background-repeat: no-repeat;
        background-size: 300px !important;
        padding: 6em 3.5em;
        & h2{
            font-size: 3em;
            margin-bottom: .5em;
        }
        & ul {
            display: flex;
            flex-direction: column;
            gap: 1.5em;
            & li{
                font-size: 1em;
            }
        }
    }
    & p:last-of-type {
        width: 100%;
        padding: .5em 0 10em;
        border-top: solid var(--secondary-color);
        text-align: center;
    }
}

body{
    background-color: var(--main-color);
}

section:not(:first-of-type){
    border-bottom: solid var(--secondary-color);
    padding: 6em 8em;

}

section:nth-of-type(even){
    background-image: url("../images/takje.png");
    background-repeat: no-repeat;
}

section:nth-of-type(odd){
    background-image: url("../images/zwaluw.png");
    background-position: top 20px right 20px;
    background-repeat: no-repeat;
    background-size: 150px;
}

h1{
    font-family: 'Medieval', Arial, Helvetica, sans-serif;
}

h2{
    color: var(--main-color-light);
    font-family: 'Medieval', serif;
    font-size: 4em;
}

h3, h4{
    color: var(--main-color-light);
    font-family: 'Medieval', serif;
    font-size: 2.5rem;
}

p, ul, ol, li, a, button{
    color: var(--main-color-light);
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 1.2rem;
}

a{
    background: linear-gradient(var(--secondary-color)) 
    bottom center/
    var(--underline-width, 0%) 0.1em
    no-repeat;
    color: var(--main-color-light);
    display: inline-block;
    padding: 0 .2em 0.2em;
    text-decoration: none;
    transition: background-size 0.5s;
}

a:hover{
    /* text-decoration: underline var(--secundary-color) 2px;
    text-underline-offset: .3em; */
    --underline-width: 100%;
}

img{
    max-width: 100%;
}

.bijschrift{
    font-size: .8em;
    opacity: .6;
}

/*********************/
/* TITLE SECTION */
/*********************/
main section:first-of-type{
    display: flex;
    align-items: center;
    background-image: url('../images/index/lady-of-shalott.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.65;
    border-bottom: none;
    min-height: 85vh;
    & div{
        padding: 4em 8em;
        width: 100%;
        background-color: rgb(42, 48, 41, 0.6);
        & h1, p{
            color: var(--main-color-light);
            opacity: 1;
        }
        & h1{
            font-size: 5rem;
            place-self: center;
        }
    }

}