* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: poppins, sans-serif;
  color:white;
  background-color: black;
  text-align: center;
  align-items: center;
  font color: black;
  height:100%;
  width: 100%;

}

header {
background-color: white;
}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  width: 100%;
}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

header nav ul li {
  margin-right: 1em;
}

header nav ul li a {
  color: green;
  text-decoration: none;
  font-size: 1.6em;
}

header nav ul li a:hover {
  color: white;
}

.text{
  margin-left: 2em;
  font-size: 1em;

}


    .container {
            display: center;
            flex-direction: flex;
            align-items: flex-start; /* Alignement à gauche */
            padding: 30px;
        }
        .box {
            margin-bottom: 40px;
            text-align: flex;
        }
        .box img {
            max-width: 45%;
            height: auto;
        }

        .box1 img {
            max-width: 18%;
            height: auto;
            }
        /* Pour inverser l'alignement des boîtes sur les lignes impaires */
        .container:nth-child(odd) {
            align-items: flex-flex-start; /* Alignement à droite */
        }
        /* Pour inverser l'alignement des boîtes sur les lignes impaires */
        /* Pour inverser l'alignement des boîtes sur les lignes impaires */
        .container .box:nth-child(odd) {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
        }

        /* Centrer horizontalement les éléments */
        .container .box {
            margin-bottom: 60px; /* Augmenter l'espacement entre les boîtes */
            text-align: right;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Ajuster l'espacement entre l'image et le texte */
        .container .box img {
            margin: 30px; /* Ajuster la marge à droite de l'image */
        }

        .container .box-text {
            margin-left: 50px; /* Ajuster la marge à gauche du texte */
        }

    </style>