@font-face {
    font-family: "Director-Light";
    src: url('fonts/Director-Light.woff2') format('woff2');
}

* {
    margin: 0;
}

body {
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    font-family: "Director-Light";
    font-weight: 100;
    margin: 0;
    background: rgb(226, 193, 249);
    background: linear-gradient(90deg, rgba(226, 193, 249, 1) 0%, rgba(240, 255, 250, 1) 33%, rgba(251, 255, 228, 1) 66%, rgba(254, 218, 251, 1) 100%);
}



.parent {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 20vh 30vh 50vh 100vh 130vh 7vh;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}




.div1 {
    grid-area: 1 / 1 / 2 / 2;
    place-self: center;
    width: 100%;
    overflow: hidden;
    /* Cache le texte qui déborde */
    white-space: nowrap;
    /* Empêche le texte de passer à la ligne */
}

h1 {
    font-size: 86px;
    color: #F34B40;
    display: inline-block;
    /* Important pour l'animation */
    animation: scrollText 45s linear infinite;
    /* Durée de 15s, mouvement linéaire, répétition infinie */
}

@keyframes scrollText {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}




.div2 {
    grid-area: 2 / 1 / 3 / 2;
    place-self: center;
}

#intro {
    text-align: center;
    color: #F34B40;
    font-size: 22px;
    width: 40%;
    margin: auto;
}





.div3 {
    grid-area: 3 / 1 / 4 / 2;
    place-self: center;
}

#noms {
    text-align: center;
    color: #111111;
    font-size: 18px;
    width: 44%;
    margin: auto;
}




.div4 {
    grid-area: 4 / 1 / 5 / 2;
    place-self: center;
}

#edito {
    height: 110vh;
}








.div5 {
    grid-area: 5 / 1 / 6 / 2;
    place-self: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #3D241C;
    font-size: 140px;
}


a {
    display: inline;
    position: relative;
    color: #3D241C;
    text-decoration: none;
}

a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 2px;
    width: 0%;
    left: 0px;
    height: 6px;
    transition: 0.25s cubic-bezier(0.72, -0.01, 0.19, 0.92);
    background: #3D241C;
}


a:hover:after {
    width: 100%;
}





.div6 {
    grid-area: 6 / 1 / 7 / 2;
    place-self: center;
}

#footer {
    text-align: center;
    color: #111111;
    font-size: 11px;
    margin: auto;
}