/* BODY - HEADER */
body {
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic';
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "s1 s1 s1"
    "s2 s2 s2"
    "s3 s3 s3"
    "s4 s4 s4"
    "s5 s5 s5"
    "s6 s6 s6"
    "s7 s7 s7"
  ;
}

h1 {
  font-size: 40px;
  margin: 50px;
  text-align: center;
  color: white;
}

#nav1 {
  grid-area: nav;
  margin-right: 30px;
}

#nav1 ul {
  display: flex;
  justify-content: center;
  padding: 20px;
}

li{
  list-style-type: none;
}

#nav1 li{
  font-size: 20px;
  margin: 30px;
}

a {
  color: white;
  text-decoration: none;
}

#section1 {
  grid-area: s1;
}

#section2 {
  grid-area: s2;
}

#section3 {
  grid-area: s3;
}

#section4 {
  grid-area: s4;
}

#section5 {
  grid-area: s5;
}

#section6 {
  grid-area: s6;
}

#section7 {
  grid-area: s7;
}

#l1 li:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background-color: white;
  transition: width .3s;
}

#l1 li:hover::after {
  width: 100%;
  transition: width .3s;
}

/* SECTION 1 */
#section1 {
  padding-top: 30px;
  height: 750px;
  background-image: url("img/fond/intro.jpg");
  background-size: 100%;
}

#logo{
  margin: 150px;
  display: grid;
  justify-content: center;
}

#logo img{
  height: 210px;
  width: 500px;
}

/* Section 2 */

#section2 {
  background-image: url('img/fond/profil.jpg');
  background-size: 100%;
  background-attachment: fixed;
  height: 800px;
}

#pres {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    ". . . . . img ."
    ". p1 p1 p1 . img ."
    ". p2 p2 p2 . img .";
}

#p1 {
  grid-area: p1;
}

#p2 {
  grid-area: p2;
}

#section2 p {
  font-size: 16px;
  font-weight: bold;
  background-color: white;
  padding: 30px;
}

#hdp {
  grid-area: img;
  height: 500px;
  width: 380px;
  transition: transform .4s;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* SECTION 3 */

#section3{
  background-image: url('img/fond/competence.jpg');
  background-size: 100%;
  background-attachment: fixed;
  height: 500px;
}

#competences li img{
  height: 60px;
  width: 200px;
  margin: 30px;
}

#competences li {
  display: flex;
  justify-content: center;
}

#competences{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    ". c1 c2 c3 ."
    ". c4 c5 c6.";
}

#comp1{
  grid-area: c1;
}

#comp2{
  grid-area: c2;
}

#comp3{
  grid-area: c3;
}

#comp4{
  grid-area: c4;
}

#comp5{
  grid-area: c5;
}

#comp6{
  grid-area: c6;
}

/* Section 4*/

#section4 {
  background-image: url("img/fond/design.jpg");
  background-size: 100%;
  background-attachment: fixed;
}

#section4 .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    ". r1 . r2 ."
    ". r3 . r4 ."
    ". r5 . r6 ."
  ;
}

#section4 .container img {
  height: 180px;
  width: 350px;
  padding-bottom: 100px;
}

.container div{
  transition: transform .4s;
}

.container div:hover{
  transform: scale(1.10);
}

.real1 {
  grid-area: r1;
}

.real2 {
  grid-area: r2;
}

.real3 {
  grid-area: r3;
}

.real4 {
  grid-area: r4;
}

.real5 {
  grid-area: r5;
}

.real6 {
  grid-area: r6;
}

/* SECTION 5*/

#section5{
  background-image: url('img/fond/leaf.jpg');
  background-size: 100%;
  height: 250px;
}

/* SECTION 6*/

#section6{
  background-color: black;
  background-size: 100%;
  background-attachment: fixed;
  height: 1600px;
}

#container-img{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    ". img1 img1 img2 ."
    ". img3 img4 img2 ."
    ". img3 img4 img5 ."
    ". img6 img6 img7 ."
    ". . . img7 .";
}

#container-img img{
  margin: 20px;
  border: solid 3px white;
  transition: transform .4s;
}

#container-img img:hover {
  transform: scale(1.05);
}

#img1{
  grid-area: img1;
  height: 300px;
  width: 700px;
}

#img2{
  grid-area: img2;
  height: 470px;
  width: 350px;
}

#img3{
  grid-area: img3;
  height: 520px;
  width: 350px;
}

#img4{
  grid-area: img4;
  height: 520px;
  width: 310px;
}

#img5{
  grid-area: img5;
  height: 350px;
  width: 350px;
}

#img6{
  grid-area: img6;
  height: 450px;
  width: 700px;
}

#img7{
  grid-area: img7;
  height: 450px;
  width: 350px;
}

/* Section 7*/

#section7{
  background-image: url('img/fond/contact.jpg');
  background-size: 100%;
  background-attachment: fixed;
}

#container-contact{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    ". contact contact imgcontact ."
    ". salut salut imgcontact .";
}

#section7 h1{
  color: black;
}

h3{
  font-size: 20px;
  text-decoration: underline;
}

h4{
  font-size: 16px;
}

#container-contact h5{
  font-size: 50px;
  grid-area: salut;
}

#contact{
  grid-area: contact;
}

#imgcontact{
  grid-area: imgcontact;
  height: 600px;
  width: 450px;
  margin: 10px;
}