body {
    font-family: 'Droulers-Regular';
    margin: 0;
}


/*------------------------------------MAIN-----------------------------------*/

/*contenu de MAIN disposé en colonnes et centré en largeur*/
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

main div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*positionnement de la div end-text*/
/*div.end-text {
    position: absolute;
    bottom: 0px;
}*/

div.central-text {
    padding-bottom: 8vw;
}

h1,
h3,
h5 {
    font-weight: normal;
    margin: 0;
}

h1 {
    font-size: 5.5em;
}

h5 {
    font-size: 0.95em;
    margin-top: 1.6vh;
}

/*transition: opacity 0.3s ease-in-out;*/


/*-----------BTN-arrow-----------*/
button img {
    width: 70%;
}

.white-arrow {
    display: none;
}

button#BTN-arrow {
    background-color: transparent;
    border-radius: 30px;
    border: 1.5px solid black;
    padding: 6.5px;
    width: 51px;
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


 
.end-text:hover #BTN-arrow {
    background-color: black;
    transition:  0.3s ease-in-out;
}

.end-text:hover .white-arrow {
    display: block;
    transition:  0.3s ease-in-out;
}

.end-text:hover .black-arrow {
    display: none;
    transition:  0.3s ease-in-out;
}


/*----------------Transition douce entre page accueil et page index----------------*/

/* Le conteneur principal de la page */
body {
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* Durée de la transition */
}

/* Classe pour la transition lors de la sortie de la page */
.fade-out {
    opacity: 0;
}




/*---------------- DIV BACK-IMG-ANIM----------------*/

.back-img-anim{
    z-index: -1;
    width: 100%;
    height: 386vh;
    background-image: url(./images/Page-anim-intro/back-img-anim.png);
    background-size:  100%;

    position: absolute;
    top: -286%;
    animation: scroll-down 30s linear infinite;
    
}
    @keyframes scroll-down {
    0% {
        top: -286%;
       
    }

    100% {
        top: 10%;
    
    }
}






/*------------------------------------------------------------------------------------------------*/
/*MEDIA QUERIES*/

/*Pour une largeur d'écran de plus de 610px*/

@media screen and (min-width: 610px) {}

/*Pour une largeur d'écran de moins de 610px*/

@media screen and (max-width : 610px) {}



@media screen and (max-width : 900px) {}



@media screen and (max-width : 400px) {}









/*-----------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'droulerstest-italic-webfont';
    src: url("font/droulerstest-italic-webfont.woff") format("woff");
    font-weight: normal;
    font-size: normal;

}

@font-face {
    font-family: 'Droulers-Regular';
    src: url("font/Droulers-Regular.woff") format("woff");
    font-weight: normal;
    font-size: normal;

}


@font-face {
    font-family: 'Syne-Regular';
    src: url("font/Syne-Regular.woff") format("woff");
    font-weight: normal;
    font-size: normal;

}