body {
  font-family: Arial, sans-serif;
  margin: 50;
  padding: 30;
  background-image: url('https://i.postimg.cc/KcLVmFv4/mer-zen-2.png');
  background-size: cover;
  background-position: center;
  
}

header {
  background-color: transparent;
  color: white;
  padding: 100px;
  text-align: left;
}

header img {
  height: 150px;
}

nav {
  margin-top: 60px;
}

nav a {
  color: blue;
  text-decoration: none;
  padding: 50px;
  font-size: 35px
  }

header h1 {
	font-size: 25px;
	font-weight: bold;
}

main {
	
  padding: 100px;

}

.texte1 {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: black;
  text-align: center;
 
  
}

.texte2 {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: black;
  text-align: center;
 opacity: 0; /* le texte est initialement invisible */
  animation: apparition 5s forwards; /* l'animation dure 10 secondes et se joue une seule fois */
  animation-delay: 4s; /* l'animation commence avec un délai de 2 secondes */
}

.texte3 {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: black;
  text-align: center;
 opacity: 0; /* le texte est initialement invisible */
  animation: apparition 5s forwards; /* l'animation dure 10 secondes et se joue une seule fois */
  animation-delay: 7s; /* l'animation commence avec un délai de 2 secondes */
}


.texte4 {
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  color: white;
  text-align: center;
 opacity: 0; /* le texte est initialement invisible */
  animation: apparition 5s forwards; /* l'animation dure 10 secondes et se joue une seule fois "forwards" */
  animation-delay: 10s; /* l'animation commence avec un délai de 2 secondes */
}

.texte5 {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: black;
  text-align: center;
 opacity: 0; /* le texte est initialement invisible */
  animation: apparition 5s forwards; /* l'animation dure 10 secondes et se joue une seule fois */
  animation-delay: 13s; /* l'animation commence avec un délai de 2 secondes */
}

footer {
	background-color: rgba(255, 255, 255, 0);
	border: 2px solid white;
	display: flex;
  color: black;
	justify-content: center;
	align-items: center;
	padding: 20px;
	margin-top: 50px;
}

footer .contact {
	text-align: center;
  font-size: 25px;
}

footer .contact p {
	margin: 0;
}

footer .contact a {
	color: blue;
	text-decoration: none;
}

footer .contact .reseaux-sociaux {
	display: flex;
	justify-content: center;
  align-items: center;
	margin: 40px 0;
}

footer .contact .reseaux-sociaux a {
	margin: 0 20px;
  
}
footer img {
	height: 50px;
	margin-right: 20px;
}

footer h2 {
  color: blue;
  }

@keyframes apparition {
	to {
    opacity: 1; /* le texte devient visible à la fin de l'animation */
  }

  @keyframes color-change {
  0% {color: blue;}
  100% {color: purple;}
  
}
  
  @media (max-width: 480px) {
  body {
    font-size: 6px;
  }
   header {
        padding: 5px;
      }

      nav {
        display: none;
      }

      main {
        padding: 5px;
      }
@media (max-width: 768px) {
  body {
    font-size: 8px;
  }
  header {
        padding: 6px;
      }

      nav {
        display: none;
      }

      main {
        padding: 6px;
      }
}