/* ---------------------------- */
/*    Propriétés générales      */
/* ---------------------------- */

*{ box-sizing: border-box;}
body{font-family: arial;}
.container{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
section{padding-top: 4rem;}
.box{
  padding: 1rem;
  background-color: #ffd2d2;
  border: 1px solid #f18282;
  margin: 1rem;
}
img{
  width: 100%;
  max-width: 250px;
}


/* ---------------------------- */
/*            header            */
/* ---------------------------- */
header{
  position: fixed;
  background-color: #fff;
  width: 100%;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); 
  box-shadow: 0 4px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); 
}

h1 {
  margin: 0.5em 0;
}

nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav li {
  display: inline-block;
  margin-left: 0.5rem;
}

nav a {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  background-color: #0d376c;
  color: #fff;
  transition: all 0.5s;
}

nav a:hover{
  background-color: #031934;
}

/* ---------------------------- */
/*    Positionnement flexbox    */
/* ---------------------------- */

.flex, .inline-flex{
  max-width: 100%;
  padding: 1rem;
  background-color: #d6f6ff;
  border: 1px solid #aac3ca;
  margin: 2rem 0;
  border-radius: 0.2rem;
}

.flex{
  display: flex;
}

.inline-flex{
 display: inline-flex;
}

#exercice_5-2 .flex{
  flex-wrap: wrap;
}

#exercice_5-3 .flex{
  flex-flow: wrap row-reverse;
}

#exercice_5-4 .flex{
  flex-wrap: wrap;
  justify-content: space-around;
}

#exercice_5-5 .flex{
  align-items: center;
}

#exercice_5-6 .flex{
  min-height: 85vh;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  align-content: space-between;
}