body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}
*{
    --violet:#F0E5FF;
    --contrast:black;
    --jaune:#FFE9B7;
    --vert:#CCDEB1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Geist-Mono';
    scroll-behavior:smooth;
}
header{
    z-index:20;
    position:absolute;
    width:100vw;
    height:15vh;
    background:var(--violet);
    padding:2vh 8vh 2vh 5vh;
}
nav{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    height:100%;
}
.nav-logo{
    height:100%;
    width:auto;
}
.nav-logo a img{
    height:100%;
    width:auto;
}
.nav-items{
    display:flex;
    flex-direction:row;
    justify-content:end;
    gap:5vw;
    align-items:center;
    width:50vw;
}
.nav-items a{
    font-weight:700;
    transition:all ease 0.2s;
    color:var(--contrast);
    text-decoration:none;
}
.nav-items a:hover{
    font-weight:900;
}

.head-container{
    z-index:200;
}

.first-container{
    padding-top:15vh;
    height:100vh;
    width:100vw;
    background:var(--violet);
    text-align:center;
}
.first-container img{
    height:100%;
    width:auto;
}
/* ##########################################################################" */
.main-content-wrapper{
    background-image:url('../assets/background-parallax.png');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-color:#FFE9B7;
    width:100vw;
    overflow:hidden;
    height:fit-content;
}
.mcw-container{
    padding:20vh;
    width:100vw;
    overflow:hidden;
}
.mcw-c-desc{
    background:#F0E5FF;
    font-weight:700;
    padding:15vh 30vh 15vh 30vh;
}
/* GALLERY */
.mcw-c-gallery{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    width:100vw;
    overflow:hidden;
    padding:15vh;
}
.mcw-c-gallery article img{
    width:100%;
    height:auto;
}

.mcw-c-infos{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    padding:5vh 20vh 10vh 20vh;
}
.mcw-c-infos article:nth-child(1){
    padding:5vh;
    display:flex;
    flex-direction:column;
    gap:5vh;
    justify-content:center;
    font-weight: 700;
    backdrop-filter: blur(2px);
    background:none;
}
.mcw-c-infos article:nth-child(1) img{
    width:50%;
    height:auto;
}
.mcw-c-infos article{
    width:50%;
    max-height:45vh;
    overflow:hidden;
}
.mcw-c-infos article img{
    height:auto;
    width:100%;
}
/* FOOTER */
.mcw-rs{
    background-color:var(--violet);
    padding:8vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:5vh;
    width:100vw;
}
.mcw-rs img{
    width:20%;
}

.fixed-stickers{
    position:fixed;
    bottom:0;
    left:0;
    width:15vw;
    height:15vw;
    margin:2vh;
}
.fixed-stickers img{
    width:100%;
    height:auto;
}

/* ############################################################################################## RESPONSIVE */
/* Mobile Devices */
@media screen and (max-width: 576px){
    header{
        width:100vw;
        height:fit-content;
        background:var(--violet);
        padding:5vh 8vh 5vh 8vh;
    }
    nav{
        justify-content:center;
    }
    .nav-logo{
        height:100%;
        width:80%;
    }
    .nav-logo a img{
        height:auto;
        width:100%;
    }
    .nav-items{
        display:none;
        visibility:hidden;
    }
    .first-container{
        padding-top:30vh;
        height:fit-content;
    }
    .first-container img{
        height:auto;
        width:100%;
    }

    .mcw-c-desc{
        padding:15vh 10vh 15vh 10vh;
    }

    .fixed-stickers{
        width:35vw;
        height:35vw;
    }

    .mcw-c-gallery{
        padding:0;
    }
    .mcw-c-gallery article img{
        width:100%;
        height:auto;

    }
    
    .mcw-c-infos{
        flex-direction:column;
        padding:10vh;
    }
    .mcw-c-infos article:nth-child(1){
        padding:5vh;
        width:100%;
    }
    .mcw-c-infos article:nth-child(2){
        width:100%;
    }
    .mcw-c-infos article:nth-child(1) img{
        width:80%;
        height:auto;
    }
    .mcw-c-infos article:nth-child(2) img{
        width:100%;
        height:auto;
    }
    .mcw-rs{
        background-color:var(--vert);
        padding:15vh;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:5vh;
        width:100vw;
    }
    .mcw-rs img{
        width:80%;
    }
}