:root{
font-size: 14px;
}

*{
  padding, margin:0;
}


/*Fonts*/
h1,h2,h3,p{
  color:white;
}



h1{
  font-family: 'Lato',sans-serif;
  font-weight:700;
  font-size: 2rem;
  line-height: 2rem;
  display:block;
  position:relative;
  text-align: center;
  width:100%;
  margin-top:6rem;
  margin-bottom:3rem;
}

.hero h1{
  font-size:3.1rem;
  line-height:3rem;
}

.flex-container h1{
  margin-top:0;
  display:block;
  line-height:25rem;
opacity:.5;
}

.flex-container h1:hover{
opacity:1;
color:white;
transition: all .3s ease-in-out;
}

}

h2{
  font-family: 'Lato',sans-serif;
  font-weight:400;
  font-size: 2em;

}


h3{
  font-family: 'Lato',sans-serif;
  font-weight:300;
  font-size: 2rem;
  line-height: 2rem;
  display:block;
  position:relative;
  text-align: center;
  margin-left:auto;
  margin-right:auto;

}

@keyframes intro{
  from {opacity:0; bottom:-10px;}
  to {opacity:1;bottom:20px;}
}

.hero h3{
margin-top:20rem;
width:70%;
opacity:0;
animation-name: intro;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}


p{

  font-family: 'Lato',sans-serif;
  font-weight:300;
  font-size: 1em;
  line-height: 1em;
  width:100%;
text-align: center;
padding:0px;

}

a{  font-family: 'Lato',sans-serif;
  text-decoration: none;
  color:white;
  margin-left:5px;
  margin-right: 5px;
  transition: opacity ease-in-out .5s;

}





/* Structure */

html{
  background:white;
}

body{
  padding:0px;
  margin:0px;
}

.logo{
top: 20px;
width: 80px;
height:80px;
margin-left:20px;
background-image: url("img/logo.png");
background-size: 80%;
background-repeat: no-repeat;
position: absolute;
}


/* Sections */

.hero{
  background-image:url(./img/hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  height:100%;
}

.flex-container{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  margin:0px;
  padding:0px;


}

.portfolio{
  margin:0px;
  width:calc(50% - 2px);
  border: 1px solid white;
  height: 25em;
  background-image:url(./img/portfolio.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  overflow: hidden;

}

.illustration{
  width:calc(50% - 2px);
  border: 1px solid white;
  height: 25em;
  background-image:url(./img/illustration.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
    overflow: hidden;
}


.design-services{
  width:calc(50% - 2px);
  border: 1px solid white;
  height: 25em;
  background-image:url(./img/design-services.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
    overflow: hidden;
}

.writing{
  width:calc(50% - 2px);
  border: 1px solid white;
  height: 25em;
  background-image:url(./img/writing2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
    overflow: hidden;
}

.footer{
  opacity:0.8;
  position:relative;
  border: 1px solid white;
  bottom:0;
  color:white;
  padding-top:1em;
  padding-bottom:1em;
margin:0px;
background-image:url(./img/footer.jpg);
background-position:bottom;
background-repeat: no-repeat;
background-size:cover;
  height:1.3em;
    width:calc(100% - 2px);

}

/*footer icons*/

.icon-set{

  width:50%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

i{
display:block;
color:white;

opacity:.5;

}


i:hover{
transition: all 0.3s ease-in-out;
opacity:1;}

.fa-twitter:before,.fa-linkedin:before,.fa-envelope:before{
  font-size: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}



/*  Media Queries */

@media(min-width:601px) and (max-width:800px){

.hero h3{
  margin-top: 15rem;
}
}


@media(max-width:600px){
  :root{
  font-size: 22px;
  }

  .hero{
    height:auto;
    padding-bottom: 50px;
  }

  .hero h1{
    font-size: 1.2rem;
    line-height:1.2rem;
    margin-top:4rem;

  }


  @keyframes intro{
    from {opacity:0; bottom:-20px;}
    to {opacity:1;bottom:10px;}
  }

  .hero h3{
margin-top:5rem;
    font-size: 1rem;
    line-height:1.2rem;
  width:90%;
  opacity:0;
  animation-name: intro;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  }


  .flex-container{
    flex-direction: column;
  }



  .flex-container h1{
    font-size:1rem;
    margin-top:0rem;
    line-height:9.1rem;
    opacity:1;

  }



  .portfolio, .illustration, .design-services, .writing{
    width:calc(100% - 2px);
    height:200px;
  }

  .icon-set{

    width:80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  i{
  display:block;
  color:white;
  font-size: 60px;
  opacity:1;

  }

  .fa-twitter:before,.fa-linkedin:before,.fa-envelope:before{
    font-size:1rem;
  }

}