body{
  margin:0;
}

nav{
  height:250px;
  background-image:url("public/desktop/header.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.text{
  font-size:18px;
  font-weight:600;
  margin:25px;
  color:white;
  display:flex;
font-family: 'Fraunces', serif;
  width:55%;
}
.nav-items{
  padding:0;
  display:flex;
  margin-right:0;
}
.links li button{
  margin-top:-10px;

}
.links li{
  float:left;
  list-style:none;
  margin-top:15px;
}
.links a{
  margin:13px;
  font-size:16px;
  font-family: 'Barlow', sans-serif;
}
a{
  text-decoration:none;
  color:white;
}
.nav-items li button{
 border:none;
  background-color:white;
  color:hsl(212, 27%, 19%);
  font-weight:700;
  font-size:13px;
  height:40px;
  width:100px;
  border-radius:20px;
  font-family: 'Fraunces', serif;
}
.nav-items li button:hover{
  background-color:#99DDFF;
  color:white;
}
#burger{
  margin:25px 20px;
  height:30px;
  display:none;
}
button{
  border:none;
  background-color:transparent;
}
#burger div{
  background-color:white;
  width:25px;
  height:5px;
  margin:3px;
}

.grid-container{
  display:grid;
  grid-gap:0;
  margin:0 0 50px 0;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto;
  grid-template-areas:
    "sidebar1 content1"
    "sidebar2 content2"
    "sidebar3 content3"
}
.grid-item-2 img, .grid-item-3 img{
  height:100%;
  width:100%;
  margin-bottom:-4px
}
.grid-item-1,.grid-item-4{
  padding:60px 20px 60px 60px;
  float:left;
}
.grid-item-1 h2, .grid-item-4 h2{
  padding:0 0 20px 0 ;
  font-family: 'Fraunces', serif;
  font-weight:700;
}
.grid-item-1 p,.grid-item-4 p{
  font-family: 'Barlow', sans-serif;
  font-size:14px;
  font-weight:400;
  color:hsl(210, 4%, 67%);
}
.grid-item-1 button,.grid-item-4 button{
  margin:15px 0 0 0;
  float:both;
  border:none;
  background-color:transparent;
  font-size:14px;
  font-weight:600;
}
.grid-item-1 button:hover{
  border-bottom:5px double hsl(51, 100%, 49%);
  border-radius:5px;
  margin-bottom:-5px;
}
.grid-item-4 button:hover{
  border-bottom:5px double hsl(7, 99%, 70%);
  border-radius:5px;
  margin-bottom:-5px;
}

.graphic{
  color: hsl(167, 40%, 24%);
  background-image: url("public/desktop/graphic.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.photography{
  color:hsl(198, 62%, 26%);
  background-image:url("public/desktop/photography.jpg");
  background-repeat:no-repeat;
  background-size:100% 100%
}
.graphic, .photography{
  padding:140px 0 0 0;
  text-align:center;
}
.graphic h2, .photography h2{
  font-family: 'Fraunces', serif;
  font-weight:700;
}
.graphic p, .photography p{
  font-family: 'Barlow', sans-serif;
  font-size:14px;
  font-weight:500;
  padding-bottom:50px;
}

.grid-item-5 h2,.grid-item-6 h2{
  margin:50px 0 20px 0;}

.grid-item-5,.grid-item-6{
  width:45%;
  text-align:center;
  margin:0px auto;
}
.client-testimonials h2{
  text-align:center;
  margin:90px 0 60px 0;
  font-family: 'Fraunces', serif;
  font-size:16px;
  color:hsl(210, 4%, 67%);
  letter-spacing:6px;
}
.grid-container-2{
  text-align:center;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:30px;
  grid-template-rows:auto;
  margin:auto 10%;
  color:hsl(212, 27%, 19%);
  font-family: 'Barlow', sans-serif;
  font-weight:500;
  font-size: 15px;
}
.grid-container-2 img{
  width:55px;
  height:55px;
  border-radius:40px;
  display:block;
  margin:0 auto 50px;
}
.author,.job{
  display:block;
  margin:10px auto;
}
.author{
  margin-top:50px;
  font-family: 'Fraunces', serif;
  font-weight:900;
  font-size:18px;
}
.job{
  font-size:13px;
  color:hsl(210, 4%, 67%);
  margin-bottom:100px;
}
.grid-container-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-rows:300px;
  margin: 50px 0 0 0;
}

.grid-container-3-image-1{
  background:url("public/desktop/milk.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.grid-container-3-image-2{
 background:url("public/desktop/orange.jpg");
  background-size: 100% 100%;
  background-repeat:no-repeat;
}
.grid-container-3-image-3{
  background:url("public/desktop/cone.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.grid-container-3-image-4{
  background:url("public/desktop/sugarcubes.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}


.footer{
  background-color:#90D4C5;
  padding:50px;
  text-align:center;
}
.footer h2{
  margin-bottom:50px;
  font-family: 'Fraunces', serif;
  font-weight:900;
  color:#038C7E;
}
.footer-links a{
  margin:20px;
  color:#50495A;
  font-family: 'Barlow', sans-serif;
  font-weight:500;
  color:#03A090;
}
.footer-icons{
  margin:40px 0 0 0;
}
.fa-facebook-square,
.fa-instagram,
.fa-twitter,
.fa-pinterest{
  padding:5px;
  width:20px;
}

.footer-links a:hover,
.fa-facebook-square:hover,
.fa-instagram:hover,
.fa-twitter:hover,
.fa-pinterest:hover{
  color:white;
}






@media only screen and (max-width:980px){
  #burger{
    display:block;
  }
  #list{

  text-align:center;

    padding: 10px 0;
    position: absolute;
    top:60px;
    left:10%;
    right:10%;
    width: 80%;
    background-color:yellow;

}
#list li{
  list-style:none;
  display:grid;
  padding:5px 0;
  width:100%;
}
#list a{
  color:black;
  font-weight:500;
}
#list a:hover{
  color:blue;
}
  .text{
    width:90%;
  }
  .links{
    display:none;
  }
}
@media only screen and (max-width:435px){


  .grid-container{
    display:grid;
    margin:0;
    padding:0;
    text-align: center;
    grid-template-columns:100%;
    grid-template-rows:auto;
    grid-template-areas:
      "image1"
      "content1"
  }
  .grid-item-2{
    grid-area:image1;
  }
  .grid-item-1,.grid-item-4{
    padding:60px 30px 60px 30px;
    float:both;
  }
  .grid-item-5,.grid-item-6{
    width:80%;
    text-align:center;
    margin:0px auto;
  }
  .client-testimonials h2{
    font-size:15px;
    letter-spacing:3px;
  }
  .grid-container-2{
    display:grid;
    grid-template-columns:1fr;
  }
  .job{
    margin:auto auto 50px auto;
  }

  .footer-links a{
    display:inline;
    margin:0;
    padding:11px;
  }
  .grid-container-3{
   height:300px;
   grid-template-columns:50% 50%;
   grid-template-rows:auto;
}