*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    font-size: 62.5%;
}
section{
    height: 100vh;
    background-color: grey;
    display: flex;
    align-items: center;
    justify-content: center;
}
body{
    font-size: 1.4rem;
    font-family: arial;
    color:white;
}

/*Desktop menu**************/
.navbar-desktop{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:5rem;
    height: 8rem;
    background-color: blueviolet;
}
.navbar-desktop a{
    color: white;
    font-weight: 800;
}

/*Mobile menu**********/
.navbar-mobile{
    background-color: blueviolet;
    padding: 1rem;

    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.navbar-mobile .burger {
    color:white;
    z-index: 100;
}
.navbar-mobile .burger:active {
    scale:0.99;
}

/*fenetre modale*/
.modal{
    background-color: rgb(84, 14, 150);
    width: 100%;
    height: 100vh;

    position: fixed;
    top:0%;
    left:100%;
    transition: left 1s;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:3rem;
}

/*CSS à afficher lors du clique sur burger (JS)*/
.modal.show-modal{
    left:0%;
}
.burger.show-modal{
    position: fixed;
    top:1rem;
}
.modal a{
    font-size: 4rem;
    color:white;
}
/*Faire disparaitre le menu mobile*/
.navbar-mobile{
    display: none;    
}

/*Pour tout ecran de 600px au maximum*/
@media screen and (max-width:600px) {
    .navbar-desktop{
        display: none;
    }
    .navbar-mobile{
        display: flex;
    }
}