body {
  font-family: "Raleway", sans-serif;
  padding-top: 5vh;
  padding-left: 5vw;
  padding-right: 5vw;
  z-index: 0;
  font-size: 1em;
  margin-top: 8vh;
}

h1 {
  font-family: "Patua One", cursive;
  font-size: 2em;
}

h2 {
  font-size: 1.3em;
}

h1,
h2 {
  padding: 0;
  margin: 0;
  display:inline;
}

h3 {
  font-size: 1.25em;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", cursive;
  /*   font-weight:900; */
}

p {
  font-weight: 400;
  font-size: 1.125em;
}

strong {
  font-weight: 500;
}

em {
  font-weight: 300;
}

div.img {
  position: absolute;
  left: 0;
  width: 97vw;
}
img {
  width: 100%;
  margin-bottom: 2vh;
}
div.caption {
  width: 100%;
  margin-bottom: 1%;
  padding-top: 2%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 2%;
  /*   background-color:lightgrey; */
}
div.return {
  width: 100%;
  text-align: center;
  margin-bottom: 5%;
}
div.thumbnail{
  display:inline-block;
  margin-bottom:4%;
}
@media screen and (max-width:576px){
  body{
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
  }
  div.thumbnail{
    width:100%;
  }
  #title{
    display:none;
  }
  .links{
    display:none;
  }
  nav ul{
    right:0;
  }
  #menu{
    display:visible;
    font-size:4em;
    padding-top:0;
  }
}
@media screen and (min-width:576px) and (max-width:1000px){
  div.thumbnail{
    width:95%;
  }
  header{
    height:50vh;
  }
  section#Work {
    margin-top:100vh;
  }
  #menu{
    display:none;
  }
}
@media screen and (min-width:1000px) {
  div.thumbnail{
    width:33%;
  }
  header{
    height:50vh;
  }
  section#Work {
    margin-top:100vh;
  }
  #menu {
    display:none;
  }
}
.container{
  whitespace:nowrap;
  text-align:center;
}
.about{
  display:inline-block;
  vertical-align:top;
}
.about-text{
  height:519px;
  width:300px;
  padding-left: 4%;
  padding-right: 4%;
  text-align:left;
}
.project{
  display:inline-block;
  vertical-align:top;
}
.project-text{
  height:500px;
  width:400px;
/*   background-color:lightgrey; */
  padding-top:1%;
  padding-left:4%;
  padding-right:4%;
  text-align:left;
}
a,
a:visited,
a:link,
a:hover {
  text-decoration: none;
  color: black;
  font-weight: 300;
}

header{
  position:absolute;
  top:0;
  left:0;
  height:75vh;
/* would normally have this set to 100vh but since codepen keeps the navigation at the top during full view, I'm lowering it    */
  width:100vw;
  background-color:lightgrey;
  margin:0;
  padding-top:20%;
  text-align:center; 
  z-index:1;
}

.headline{
  font-size:3em;
}

nav{
  position:fixed;
  top:0;
  left:0;
  height:5vh;
  width:100vw;
  background-color:white;
  z-index:100;
  padding-top:2%;
  padding-left: 2%;
  padding-bottom:3%;
  display:inline;
}

nav ul{
  position:absolute;
  right:4%;
  text-align:left;
  display:inline;
}

nav ul li{
  display:inline;
  text-decoration:none;
  text-align:left;
}




section#Work {
  position:relative;
  width:100%;
  margin-top: 90vh;
/*   background-color:darkgrey; */
}

section#About {
  margin-top:20vh;
}

section#Contact{
  
}