/* //// Flexbox normal */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */

#flex-container {
  display: flex;
  /* display: none !important; */
  flex-direction: row;
  gap: 0px 70px;
  text-align: justify;
}
#flex-container > .flex-item {
  flex: auto;
}

.flex-item {
  width: 100px;  
  margin: auto;  /* Magic! */
}



/* //// FLEX items (boites) */

/* ... */
.flex-container {
  display: flex;
  max-width: 80vw;

  display: flex;
  flex-flow: row wrap;
  justify-content: right;
  
  /* RESET */
  padding: 0;
  list-style: none;
  width: 100%;
  margin: auto;

  img {
    display: none;
  }
}
.flex-container.tomato 
.flex-item {
  background: tomato;
  padding: 0px;
  width: 200px;
  width: calc(100% / 4 - 10px);
  box-sizing: content-box;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}




/* //// Navigation */
.navigation li {
  list-style: none;
}

/* Large */
.navigation {
  gap: 0px 20px;
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}



/* FIXS */
body {
  margin: 0;
  max-width: none;
  box-sizing: content-box;
}

#flexbox_css_tricks {
  /* width: 100vw; */
  width: calc(100vw - 13px);
}


/* ///// FLEXBOX */
#flex-container,
.flex-container {
  margin: auto;
  clear: both;
  max-width: 80vw;
}
#flex-container,
.flex-container, 
.navigation {
  margin-top: 3rem;
  margin-bottom: 3rem;
}