/*L'élément body a une marge de 0.*/
body {
  margin: 0;
}

/*margin: 0 à tous les éléments h3 et p.*/
h3,
p {
  margin: 0;
}

/*La classe .container1 a une largeur de 50% et est centrée sur la page avec "margin: 0 auto". Il a également un rembourrage de 50px 0.*/
.container1 {
  width: 50%;
  margin: 0 auto;
  padding: 50px 0;
  min-height: 80vh;
}

/*La classe .contact-item applique la couleur d'arrière-plan, les paramètres de débordement, le remplissage, la marge, le rayon de la bordure et l'ombre de la boîte aux éléments de cette classe.*/
.contact-item {
  background-color: #ffffff;
  overflow: hidden;
  padding: 15px;
  margin: 0 0 15px;
  border-radius: 67px;
  box-shadow: 1px 1px 16px -6px rgba(0, 0, 0, 0.5);
  margin-top: 30px;
}

/*La classe .avatar fait flotter l'élément vers la gauche et définit la largeur et la hauteur sur 128 pixels. Il définit également une marge droite de 35px et le rayon de la bordure à 50%.*/
.avatar {
  float: left;
  width: 128px;
  height: 128px;
  margin-right: 35px;
  border-radius: 50%;
}

/*La classe .main-content définit le rembourrage sur 15px 0 et la famille de polices sur Cairo, sans-serif.*/
.main-content {
  padding: 15px 0;
  font-family: Cairo, sans-serif;
}

/*La classe .titleco centre son contenu et définit la taille de la police à 400 % avec une marge inférieure de 30 px et une marge supérieure de 100 px.*/
.titleco {
  display: flex;
  justify-content: center;
  font-size: 400%;
  margin-top: 100px;
}

.soustitree {
  display: flex;
  justify-content: center;
  font-size: 200%;
  margin-bottom: 100px;
}

.timer {
  display: flex;
  margin-left: 163px;
}

.fa-globe{
  display: flex;
  color: black;
  margin-top: 20px;
  margin-right: 5px;
}

.button {
  padding: 0.6rem 1.3rem;
  background-color: #fff;
  font-size: 0.95rem;
  color: #000000;
  border-radius: 25px;
  cursor: pointer;
  margin: 0;
  margin-top: 5px;
  box-shadow: none;
  border: 2px solid #000;
}
.p.button{
  max-width: 200px;
}

/*La première requête média change la largeur de .container1 en "min-content" lorsque la taille de l'écran est de 700px ou moins.*/
@media (max-width:1253px) {
  .tel {
    display: flex;
    justify-content: center;
  }

  .rue {
    display: flex;
    justify-content: center;
  }

  .timer {
    display: flex;
    justify-content: center;
  }

  .email {
    display: flex;
    justify-content: center;
  }

  .des {
    display: flex;
    justify-content: center;
  }

  .name {
    display: flex;
    justify-content: center;
  }
}

/*La deuxième requête multimédia modifie la marge supérieure et la marge inférieure de .titleco à 10em, la taille de police à 150 % et la taille de police de h3 et p à 10px lorsque la taille de l'écran est de 700px ou moins.*/
@media (max-width:700px) {

  .container1 {
    width: min-content;

  }

  .titleco {
    margin-top: 10em;
    margin-bottom: 10em;
    font-size: 150%;
  }

  h3,
  p {
    font-size: 10px;
  }

}

@media (max-width:600px) {
  .tel {
    display: flex;
    justify-content: space-between;
  }

  .rue {
    display: flex;
    justify-content: space-between;
  }

  .timer {
    display: flex;
    justify-content: space-between;
  }

  .email {
    display: flex;
    justify-content: space-between;
  }

  .des {
    display: flex;
    justify-content: space-between;
  }

  .name {
    display: flex;
    justify-content: space-between;
  }

  h3,
  p {
    font-size: 5px;
  }
  .button{
    font-size: 5px;
  }
}