body{
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
  background-color: rgba(202, 196, 191, 0.788);
  margin: 0 0;
  height: 100vh;
}

.wrapper {
  display: grid;
  grid-template-columns: 20% repeat(2,1fr);
  grid-template-rows: 10% 25% repeat(2,1fr) 5%;
  grid-template-areas: 
  ". . img2"
  "header h1 img2"
  "header img1 img2 "
  "social img1 presentation"
  ". img1 footer";
  height: 100vh;
  column-gap: 30px;
  row-gap: 20px;
}

.background-img{
  grid-row: 2 / 5;
  grid-column: 2 / 4;
  background-color: rgb(190, 180, 169);
  border-radius: 3% 0% 0% 3%;
  border: 5px solid rgb(255, 255, 255);
}
  
header{
  grid-area: header;
  padding: 15%;
}

h1{
  grid-area: h1;
  font-size: 3.5rem;
  justify-self: center;
  align-self: center;
}

.img1{
  grid-area: img1;
  justify-self: flex-end;
}

.img2{
  grid-area: img2;
  justify-self: center;
}

.presentation{
  grid-area: presentation;
  line-height: 2;
  padding: 0 10%;
  justify-self: center;
  align-self: center;
  font-size: auto;
  }

footer{
  grid-area: footer;
  justify-self: end;
  align-self: flex-end;
  font-size: 1rem;
  }

.social{
  grid-area: social;
  align-self: flex-end;
  justify-self: center;
}


h2{
  font-size: 3rem;
  font-weight: bolder;
  justify-self: center;
}

.italic{
  font-style: italic;
}

.social li {
display: inline;
padding: 15px;
font-size: 1.5em;
}

ul{
  list-style-type: none;
}

.tabs li{
  line-height: 3;
}

.wrapper > div img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.tabs a {
  outline: none;
  text-decoration: none;
  padding: 20px 20px;
}

.tabs a:link {
  color: black;
}

.tabs a:visited {
  color: rgb(0, 0, 0);
}

.tabs a:hover {
  background: rgb(190, 180, 169);
}

.tabs a:active {
  background: rgb(190, 180, 169);
  color: rgb(255, 255, 255);
}

.social a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

.social a:link {
  color: black;
}

.social a:visited {
  color: rgb(0, 0, 0);
}
.social a:hover {
  color: rgb(255, 255, 255);
}

.social a:active {
  color: rgb(255, 255, 255);
}

@media only screen and (max-width: 2120px){
  .img1{
    align-self: flex-end;
    margin-left: 7%;
  }

  h1{
    align-self: flex-end;
    margin-bottom: 0;
    margin-left: 7%;
    font-size: 4rem;
 }

    .presentation{
  line-height: 1.5;
  padding-bottom: 2%;
  }
}

@media only screen and (max-width: 1710px){
  .wrapper{
    grid-template-columns: 20% 40% 40%;
    grid-template-rows: 5% 40% 50% 5%;
    grid-area: 
    ". . img2"
    "header h1 img2"
    "header img1 presentation"
    "social img1 footer";
    width: 100vw;
  }

  .presentation{
    align-self: flex-end;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0;
 
  }

  .img1{
    justify-self: flex-end;
    height: 95%;
  }

  .social li{
    padding: 2%;
  }

  h1{
    align-self: flex-end;
  }
}

@media only screen and (max-width: 1347px) and (min-width: 799px){
  .wrapper{
    grid-template-columns: 17% 1fr 1fr;
    grid-template-rows: 5% repeat(2,1fr) 5%;
    grid-area: 
    "header . img2"
    "header h1 img2"
    "header img1 presentation"
    "social img1 footer";
    width: 100vw;
  }
  
  *{
  font-size: 0.8rem;
  }

  .presentation{
    margin-bottom: 15%;
  }
 /*find a way to limit the height without content going over container = max height or maybe position ...*/ 
}


@media only screen and (max-width: 800px){
  .wrapper{
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 0.5fr 500px 1fr 500px 0.5fr;
    grid-template-areas: 
    "header"
    "h1"
    "img2"
    "presentation"
    "img1"
    "footer";
    height: 100vh;
    row-gap: 0;
    overflow: scroll;
  }

  header{
    font-size: 0.8rem;
    padding: 0 2%;
  }

  header p{
    display: none;
    /*try to place it with z-index or other under tabs*/
  }

  .tabs{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 2% 0;
    border-top: dashed 5px rgb(231, 231, 231);;
  }

  .background-img{
    grid-row: 2 ;
    grid-column: 1;
  }

  h1, h2{
    padding: 5% 5%;
    font-size: 2rem;
    font-weight: bolder;
  }

  h2{
    padding-bottom: 0%;
  }

  .social{
    grid-row: 6 / 7;
    grid-column: 1;
    padding: 7%;
  }
}