* {
    box-sizing: border-box;
    font-family: "Roboto";
}

*::selection {
    background-color: #f8650cc2;
    color: black;
}

body {
    
    background-color: #202833;
}


/*L'identifiant limitation nous permet d'encadrer les éléments, ainsi que les mettres en flex*/
#limitation {
    max-width: 2200px;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
}

h1 {
    font-size: 3em;
    /*En mettant h1 plus grand que h2 il ressort plus*/
}

.headers {
    text-align: center;
    margin: 0 auto;
    margin-top: 100px;
    padding: 40px;
    border-radius: 45px;
    background-color: #FFB037;
}

.flexbox {
    padding-top: 10em;
    /*Cela agrandi l'espace entre le header et les éléments*/
    display: flex;
    /*Cela permet de les faire apparaitre sur les memes lignes au lieu d'avor un seul élément par ligne*/
    justify-content: center;
    flex-wrap: wrap;
    /*Avec ca les éléments se cadre à la dimension de l'ecran, bien sur en restant dans l'encadrement de #limitation*/
}

.inFlex {
    font-size: 1.8em;
    display: flex;
    /*Les deux prochaines lignes, avec "a{display:block;}" permettent de centrer le texte dans la bulle*/
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    /*Cela transforme la div en cercle*/
    padding: 5em;
    /*Cela fait agrandir la taille du cercle*/
    background-color: #FBDFB7;
}

a {
    color: black;
    display: block;
    /*Les deux prochaines lignes enleves les proprietes visuelles des liens*/
    outline: none;
    text-decoration: none;
}

.flexbox a {
    margin: 6em;
    /*Cela creer les ecarts entre chaque élément*/
}


/*On donne des propriétés d'animation à chaque élément*/

#fonctions {
    margin-left: -150%;
    /*Le margin-left est différent pour chaque élément*/
    opacity: 0%;
    animation-name: intro_fonctions;
    animation-duration: 1.7s;
    /*En gardant la meme duration et en changeant la distance a parcourir on augmente la vitesse*/
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    /*Cela nous permet de faire en sorte que les éléments peuvent debuter avec une opacite de 0 et garder sa visibilite apres que l'animation ait fini*/
    animation-timing-function: cubic-bezier(.54, 1.49, .58, .95);
    /*Cela genere le mouvement particulier des éléments*/
}

#creation {
    margin-left: -250%;
    opacity: 0%;
    animation-name: intro_creation;
    animation-duration: 1.7s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.54, 1.49, .58, .95);
}

#speculatifs {
    margin-left: -400%;
    opacity: 0%;
    animation-name: intro_speculatifs;
    animation-duration: 1.7s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.54, 1.49, .58, .95);
}

#succes {
    margin-left: -600%;
    opacity: 0%;
    animation-name: intro_succes;
    animation-duration: 1.7s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.54, 1.49, .58, .95);
}

#avenir {
    margin-left: -700%;
    opacity: 0%;
    animation-name: intro_avenir;
    animation-duration: 1.7s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.54, 1.49, .58, .95);
}

#autre {
    margin-left: -800%;
    opacity: 0%;
    animation-name: intro_autre;
    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.54, 1.49, .58, .95);
}


/*Transition*/

.flexbox div:hover {
    transform: scale(120%);
    /*Quand on passe la souris sur un élément il s'agrandit*/
    transition: 0.3s;
}

.flexbox div {
    transition: 0.5s;
    /*Cela fait en sorte que quand on enleve la souris de l'élément il revient a ca condition normale lentement, au lien d'instantanément dans le cas de défaut*/
}


/*Animations*/

@keyframes intro_fonctions {
    from {
        margin-left: -150%;
        /*Chaque élément commence */
    }
    to {
        margin-left: 0%;
        opacity: 100%;
    }
}

@keyframes intro_creation {
    from {
        margin-left: -250%;
    }
    to {
        margin-left: 0%;
        opacity: 100%;
    }
}

@keyframes intro_speculatifs {
    from {
        margin-left: -400%;
    }
    to {
        margin-left: 0%;
        opacity: 100%;
    }
}

@keyframes intro_succes {
    from {
        margin-left: -600%;
    }
    to {
        margin-left: 0%;
        opacity: 100%;
    }
}

@keyframes intro_avenir {
    from {
        margin-left: -700%;
    }
    to {
        margin-left: 0%;
        opacity: 100%;
    }
}

@keyframes intro_autre {
    from {
        margin-left: -800%;
    }
    to {
        margin-left: 0%;
        opacity: 100%;
    }
}