/*----------------------------------------------------------------------------
    Reset
----------------------------------------------------------------------------*/

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*------------------------------------------------------------------------------
   Base
------------------------------------------------------------------------------*/


body {
    font-family: "helvetica", sans-serif;
    background-color: white;

}

/*------------------------------------------------------------------------------
   Mise en page
------------------------------------------------------------------------------*/

.wrapper {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px;
}


/*------------------------------------------------------------------------------
   Modules
------------------------------------------------------------------------------*/

/* header */

header {
    padding: 20px 0;
    background-color: #ECEFF1;
}


/*  Boutons */

.bouton {
    color: #f44336;
    font-size: 60px;
    text-decoration: none;
    width: 100%;
    font-weight: bold;
    margin: 60px 0;
    padding: 40px 20px;

    /* Arrondir les coins des boutons à 20px */


    /*
      Mettre une ombre aux boutons :
        - La distance du flou de l'ombre doit être de 3px
        - Décalage vers le bas doit être de 10px
        - Décalage vers la droite doit être de 5px
        - La couleur de l'ombre doit être noir avec une transparence à 0.2

      Référence pour l'ombre :
        https://www.alsacreations.com/tuto/lire/1338-css3-box-shadow-ombre.html
    */


}

.bouton1 span:last-child {
    color: #c62828;
}

/*
    Au survol des sections, mettre une ombre interne aux boutons :
        - La distance du flou de l'ombre doit être de 2px
        - Décalage vers le bas doit être de 5px
        - Décalage vers la droite doit être de 5px
        - La couleur de l'ombre doit être noir avec une transparence à 0.4

        Référence pour l'ombre :
            https://www.alsacreations.com/tuto/lire/1338-css3-box-shadow-ombre.html
*/


.bouton1 {
    display: flex;
    justify-content: space-between;

    /*
        Mettre un arrière-plan en dégradé de la couleur #c62828 à la couleur #f44336
        avec une rotation du dégradé de 160deg.

        Il faut arriver au même résultat que l'image de référence.

        Référence pour le dégradé:
            https://la-cascade.io/les-degrades-css/
    */




}

.bouton2 {
    display: flex;
    justify-content: center;

    /*
        Mettre un arrière-plan en dégradé de la couleur #a7cedd à la couleur #265488 du bas vers le haut.

        L'image nageur.svg doit être à 5% de la bordure gauche et à 50% du haut de la boîte.
        L'image doit mesurer 50px par 50px. (pensez à quelque chose.. -size, en lien avec l'arrière-plan)

        L'image ombrelle.svg doit être à 95% de la bordure gauche et à 50% du haut de la boîte.
        L'image doit mesurer 50px par 50px. (pensez à quelque chose.. -size, en lien avec l'arrière-plan)

        Il faut arriver au même résultat que l'image de référence.

        Référence pour l'arrière-plan multiple :
            https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arri%C3%A8re-plans
    */


}

.bouton2 span {
    color: #eee;
}


/* footer */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    color: white;
    background: #607D8B;
}