/* ---------------------------- */
/*    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;}
.full-height{min-height: 100vh;}
img{
  width: 100%;
  max-width: 250px;
}
.img-small{width: 80px;}


/* ---------------------------- */
/*            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 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);
}

h1 {
  margin: 0.5em 0;
}

nav{
  display: -ms-flexbox;  	/* IE 10 */
  display: -webkit-flex; 	/* Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; /* Firefox, Chrome, Opera */

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  -webkit-box-align: center;
  -ms-flex-align: center;
  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    */
/* ---------------------------- */

.box{
  padding: 2rem;
}

.box:first-child{background-color: #ffd2d2;}
.box:nth-child(2){background-color: #96d5e3;}
.box:nth-child(3){background-color: #6eef90;}
.box:nth-child(4){background-color: #fff6b2;}
.box:nth-child(5){background-color: #e4c1fa;}
.box:nth-child(6){background-color: #fac96f;}

.flex{
  background-color: #f6f6f6;
  border: 3px dashed #d7d7d7;
  margin-bottom: 2rem;
  overflow: hidden;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex-wrap{
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* ---------------------------- */
/*     Exercice 5.8 à 5.12      */
/* ---------------------------- */


/*   Exercice 5.8   */
@media screen and (max-width: 520px){
  #exercice_5-8 .box:nth-child(3){
    order: -1;
  }
}


/*   Exercice 5.9   */

#exercice_5-9 .box:nth-child(2){
  flex-grow: 4;
}

#exercice_5-9 .box:nth-child(3){
  flex-grow: 1;
}


/*   Exercice 5.10   */

#exercice_5-10 .box:nth-child(1){
  flex-shrink: 2;
}

#exercice_5-10 .box:nth-child(3){
  flex-shrink: 0;
}


/*   Exercice 5.11   */

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

#exercice_5-11 .box{
  flex: 1 1 16.66%;
}


/*   Exercice 5.12   */


#exercice_5-12 .box:nth-child(1){
  align-self: center;
  flex: 1 1 30%;
}

#exercice_5-12 .box:nth-child(2){
  flex: 1 1 70%; 
}

#exercice_5-12 .box:nth-child(3){
  flex: 1 1 50%; 
}

#exercice_5-12 .box:nth-child(4){
  flex: 1 1 50%;
  align-self: center;
}

#exercice_5-12 .box:nth-child(5){
  flex: 1 1 70%; 
  align-self: flex-end;
}

#exercice_5-12 .box:nth-child(6){
  flex: 1 1 30%; 
}