@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap');

:root {
    font-family: 'Dosis', sans-serif;
}

/*tout*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-size:1.5vw;
    overflow-x: hidden; /*pas de scroll gauche droite*/
}

/*couleur du bandeau*/
header {
    background-color: plum;
}

.img2{
    width:100vw;
}

section{
    text-align:center;
    padding:2vw 6vw 0vw 6vw;
}

.head {
    position: relative;
}

.gif {
    bottom: 10vw;
    right: 38.9vw;
    position: absolute;
    width: 20vw;
}

body div a {
    width: 21vw;
    font-size: 3.5vw;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: plum;
    text-decoration-thickness: 0.5vw;
    margin-top: 5vw;
}

#ckoi ul {
    text-align: left;
    padding-left: 20vw;
}

body > div {
    display: flex;
    flex-direction: column;
}

body div a:hover .arrow {
    transform: translateX(20px);
}

.arrow {
    margin-left: 2vw;
    width: 2vw;
    transition: all 0.3s ease-in-out;
}

.links {
    align-items: center;
}

.fa{
    margin-right: 1vw;
}

footer{
    background-color:plum;
}


@media only screen and (max-device-width: 480px) {

    .gif{
        display:none;
    }

    .nav:target .nav__menu, .nav--open .nav__menu {
        background-color: plum;
    }

    body{
        font-size:3vw;
    }
}