/* css voor de index pagina */

@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');

html, body{
width: 100vw;
height: 100vh;
}

.container{
    width:100vw;
    height:100vh;
    overflow: hidden;
    font-family: "Mountains of Christmas", serif;
    font-weight: 700;
    font-style: normal;
    position: relative;
}

.container img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: top;
}

/* positie en kleur komen uit inline style (database); geen vaste hoek/kleur hier */
.container .overlay {
    position: absolute;
    font-size: 50px;
    margin: 0;
    pointer-events: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}


/* Extra Large - max 1600px */
@media (max-width: 1600px) {
    .container .overlay {
        font-size: 40px;
    }
}

/* Large - max 1024px */
@media (max-width: 1024px) {
    .container .overlay {
        font-size: 24px;
    }
}

/* Medium - max 768px */
@media (max-width: 768px) {
    .container .overlay {
        font-size: 20px;
    }
}

/* Small - max 480px */
@media (max-width: 480px) {
    .container .overlay {
        font-size: 14px;
    }
}