@font-face {
    font-family: 'montserrat';
    src: url('../ressources/font-family/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');/
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*titre page index*/
h1 {
    width: 100%;
    margin: 3%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    color: transparent;
}

/*taille des images*/
img {
    width: 58%;
}

/*positionnement des colonnes du bloc qui contient les images généré*/
#contain-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 99%;
}

/* positionnement des images avec animation */
.image {
    align-items: center;
    animation: slideInFromTop 1s ease-in-out;
}

/*positionnement de l'image par rapport a son id*/
.flex-start {
    display: flex;
    justify-content: flex-start;
}

/*positionnement de l'image par rapport a son id*/
.flex-end {
    display: flex;
    justify-content: flex-end;
}

/*animation apparition des images du haut vers le positionnement defini*/
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animation de mouvement circulaire sur elle-même */
@keyframes rotationCirculaire {

    0%,
    50% {
        transform: rotate(2deg);
    }

    0%,
    100% {
        transform: rotate(-2deg);
    }
}


/* Applique l'animation aux images une fois positionné a leurs place */
.image.circulaire {
    width: auto;
    max-width: 100%;
    animation: rotationCirculaire 10s linear infinite;
}

/*bloc footer bas de page*/
#footer {
    background-color: black;
    display: flex;
    justify-content: center;
    padding: 10px;
    margin-top: 3%;
    bottom: 0 !important;

}

/*logo dans le footer*/
#logo-decaroli {
    margin: 0 auto;
    width: 13%;
    padding-top: 2%;
    padding-bottom: 2%;
}


/*fleche*/
#fleche {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    width: 40px;
    position: fixed;
    cursor: pointer;
}

#fleche.active {
    opacity: 1;
}

/*animation de la fleche*/
@keyframes bounce {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

/*cercle qui contient la fleche*/
#cercle {
    display: none;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 100px;
    position: fixed;
    bottom: 60px;
    right: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-in-out;
}


#cercle.active {
    opacity: 1;
    animation: bounce 0.5s infinite alternate;
}

#cercle:hover {
    opacity: 0.5;
}

@media (max-width: 431px) {
    /*positionnement des images en colonne*/
    #contain-images {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    
    }
    #logo-decaroli {
        width: 38%;
    }

    .flex-start {
        justify-content: center ;
    }

    .flex-end {
        justify-content: center ;
    }
}
/* Styles pour grand mobile a tablette */
@media (min-width: 431px) and (max-width: 767px) {

    img {
        width: 100%;
    }

    #logo-decaroli {
        width: 20%;
    }

    .image.circular {
        animation: rotateCircular 4s linear infinite;
    }

    #cercle {
        display: none;
    }
}

/* Styles pour grande tablette a pc portable */
@media (min-width: 768px) and (max-width:1023px) {

    img {
        width: 90%;
    }

    .image.circular {
        width: auto;
        max-width: 100%;
        animation: rotateCircular 4s linear infinite;
    }

    #logo-decaroli {
        width: 20%;
    }

}

@media (min-width: 1920px) and (max-width:2000px) {
 body{
    background-color:black;
    /* overflow: hidden;  */
    /* height: 200vh; Hauteur pour permettre le défilement */
    background-color: #f0f0f0;
    text-align: center;
    padding-top: 50px;
 }

}