/*----------------------------------------------------------------------------
    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;

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

  /*
      #2 
      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;
}

/*
    #3 
    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;

  /*
        #4 
        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;

  /*
        #5
        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;
}