/**
 * @author Louis-Émile Vromet (quelques broutilles d'actualisation de l'exercice)
 * @author Louis-Émile Vromet 2142261@csfoy.ca   <---- Utiliser nom complet ou nom d'utilisateur Github
 *
**/

@import url(normalize.css);

@font-face {
    font-family: 'motion_personal_usebold';
    src: url('../font/motionpersonaluse.woff2') format('woff2'),
         url('../font/motionpersonaluse.woff') format('woff'), 
         url('../font/motionpersonaluse.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}

img {
    max-width: 100%;
    display: block;
}


.Bored_Ape {
    background-color: #F5CABF;
    margin: 0%;
    background-image: url(../images/texture-1.png), url(../images/texture-1.png);
    background-position: center left, center right;
    background-repeat: repeat-y;
    background-size: 200px;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: 
                        ". . G G G G G G G G G G G . . ."
                        ". . A A A A B B B B B B B B . ."
                        ". . C C C C C C C C D D D D . ."
                        ". . E E E E F F F F F F F F . .";

}
.Bored_Ape_Titre {
    grid-area: G;
}
.Bored_Ape__images__01 {
    grid-area: A;
    color: #2B246A;
}
.Bored_Ape__description__01 {
    grid-area: B;
    color: #2B246A;
    font-size: 115%;
}
.Bored_Ape__images__02 {
    grid-area: D;
    color: #2B246A;
}
.Bored_Ape__description__02 {
    grid-area: C;
    color: #2B246A;
    font-size: 115%;
}
.Bored_Ape__images__03 {
    grid-area: E;
    color: #2B246A;
}
.Bored_Ape__description__03 {
    grid-area: F;
    color: #2B246A;
    font-size: 115%;
}

@media(max-width:800px){

    .Bored_Ape {
        background-color: #F5CABF;
        margin: 0%;
        background-image: url(../images/texture-1.png), url(../images/texture-1.png);
        background-position: center left, center right;
        background-repeat: repeat-y;
        background-size: 200px;
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-template-areas: 
                            ". N ."
                            ". H ."
                            ". I ."
                            ". J ."
                            ". K ."
                            ". L ."
                            ". M ."

    
    }
    .Bored_Ape_Titre {
        grid-area: N;
        margin-left: 150%;
    }
    .Bored_Ape__images__01 {
        grid-area: H;
        color: #2B246A;
        margin-left: 10%;
    }
    .Bored_Ape__description__01 {
        grid-area: I;
        color: #2B246A;
        font-size: 115%;
        margin-left: 180%;
    }
    .Bored_Ape__images__02 {
        grid-area: J;
        color: #2B246A;
        margin-left: 150%;
    }
    .Bored_Ape__description__02 {
        grid-area: K;
        color: #2B246A;
        font-size: 115%;
        margin-left: 150%;
    }
    .Bored_Ape__images__03 {
        grid-area: L;
        color: #2B246A;
        margin-left: 150%;
    }
    .Bored_Ape__description__03 {
        grid-area: M;
        color: #2B246A;
        font-size: 115%;
        margin-left: 150%;
    }

} 

/* aire occupée par les éléments d'interface */
.header {
    max-width: 100%;
}
.content {
    grid-area: content;
}

/* régles générales */
body {
    margin: 0%;
    background-color: #2B246A;
    background-image: url(../images/texture-2.png), url(../images/texture-2.png);
    background-position: center left, center right;
    background-repeat: repeat-y;
    background-size: 300px;
}

@media(max-width:800px){

    body{
        margin: 0%;
        background-image: url(../images/texture-2.png), url(../images/texture-2.png);
        background-position: center left, center right;
        background-repeat: repeat-y;
        background-size: 170px;
    }

} 

@media(max-width:600px){

    body{
        margin: 0%;
        background-image: url(../images/texture-2.png), url(../images/texture-2.png);
        background-position: center left, center right;
        background-repeat: repeat-y;
        background-size: 115px;
    }

} 
.img_header {
    width: 120px;
}

.img_entete {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200%;
}

.header nav {
    display: flex;
    justify-content: space-between;
    background-color: #F5CABF;
    color: #fff;
    font-size: 150%;
}
.header ul {
    display: flex;
    justify-content: space-betweens;
    list-style: none;
}

.header li {
    margin-right: 15px;
    color: #2B246A;
    text-decoration-line: underline;
}

.header h1 {
    color: white;
    display: flex;
    justify-content: center;
    font-family: motion_personal_usebold,sans-serif;
    font-size: 400%;
}

@media(max-width:800px){

    .header h1{
        color: white;
        display: flex;
        justify-content: center;
        font-family: motion_personal_usebold,sans-serif;
        font-size: 325%;
    }

} 

@media(max-width:600px){

    .header h1{
        color: white;
        display: flex;
        justify-content: center;
        font-family: motion_personal_usebold,sans-serif;
        font-size: 275%;
    }

} 

.header h2 {
    color: white;
    display: flex;
    justify-content: center;
    font-size: 200%;
}

@media(max-width:800px){

    .header h2{
        color: white;
        display: flex;
        justify-content: center;
        font-size: 175%;
    }

} 

@media(max-width:600px){

    .header h2{
        color: white;
        display: flex;
        justify-content: center;
        font-size: 150%;
    }

} 

.conteneur_01 {
    max-width: 100%;
}

.conteneur_01 h1 {
    color: white;
    display: flex;
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
    font-size: 200%;
}

.conteneur_01 p {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
    font-size: 150%;

}

.img_conteneur_01 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.conteneur_01 h2 {
    color: white;
    display: flex;
    justify-content: center;
    font-size: 200%;
}

.conteneur_02 {
    max-width: 100%;
}

.conteneur_02 figure {
    min-width: 50%;
}

.container_02 h1 {
    max-width: 100%;
    color: #2B246A;
}

.footer {
    background-color:black;
    margin-top: 30px;
}
.conteneur_03 {
    max-width: 100%;
}
.conteneur_03 h1 {
    color: white;
    display: flex;
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
    font-size: 200%;
}

.conteneur_03 p {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
    font-size: 150%;
}
.conteneur_03 h2 {
    color: white;
    display: flex;
    justify-content: center;
    font-size: 200%;   
}

.img_conteneur03 {
    max-width: 100%;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
    float: left;
    width: 33.33%;
  }
  
  /* Clear floats after image containers */
  .row::after {
    content: "";
    clear: both;
    display: table;
  }


@media(max-width:800px){

    .column{
        float: none;
    }

} 

  .column img {
      border-radius: 8%;
      display: block;
      margin-left: 250px;
      margin-right: auto;
  }

  .box p {
    display: flex;
    justify-content: center;

  }

  .site-footer p {
      color: white;
      display: flex;
      justify-content: center;
  }

  .site-footer {
    background-color: black;
      text-align: center;
      padding: 10px 0;
  }
  
  #social-wrapper {
      text-align: center;
  }
  
  /*Social Media Icons*/
  .social-wrapper {
      text-align: center;
  }
  
  .social-wrapper ul li {
      display: inline;
      margin: 0 5px;
  }
  
  .twitter-icon,
  .facebook-icon,
  .instagram-icon,
  .linkedin-icon,
  .googleplus-icon,
  .youtube-icon,
  .foursquare-icon{
      margin-top: .625em;
      width: 40px;
      height: 40px;
      opacity: .6;
      filter: alpha(opacity=60); /* For IE8 and earlier */
    border-radius: 25px;
  }
  
  .twitter-icon:hover,
  .facebook-icon:hover,
  .instagram-icon:hover,
  .linkedin-icon:hover,
  .googleplus-icon:hover,
  .youtube-icon:hover,
  .foursquare-icon:hover {
      opacity: 1.0;
      filter: alpha(opacity=100); /* For IE8 and earlier */
  }
  
  .footer-nav p {
      text-align: center;
  }

  .credits {

  }