<!-- previous flag -->
<div class="flag-container">
  <div class="flag-color-one"></div>
  <div class="coat-of-arms"></div>
  <div class="flag-color-two"></div>
</div>
<p class="flag-slogan"> L'Union fait la force!  </p>
<!-- current flag -->
<div class="flag-container">
  <div class="flag-color-one"></div>
  <div class="coat-of-arms"></div>
  <div class="flag-color-two"></div>
</div>
<p class="flag-slogan"> L'Union fait la force!  </p>

  

body {
    background-color: #2596be;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    min-height: 70vh;
    width: 100vw;
  }
.flag-container {
  display: flex;
  flex-direction: column;
  height: 200px; /* Adjust the height as needed */
  width: 300px; /* Adjust the width as needed */
  justify-content: center; /* Center the flag horizontally */
}

.flag-color-one {
  background-color: #00209f; /* Color of current haitian flag */
  flex: 1;
}

.coat-of-arms {
  background-color: white;
  height: 50px; /* Adjust the height as needed */
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Haiti-coat-of-arms.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.flag-color-two {
  background-color: #ce1126; /* Haitian flag red */
  flex: 1;
}
.flag-slogan{
  font: bold 18px Helvetica, Arial, sans-serif;
  color: black;
  text-align: center;
}

/* code  for first Haitian Flag */
.1964-flag-color-one {
  background-color: black;
  flex: 1;
}