/*styles go here*/

/* p { */

#container {

max-width:95%;
text-align: center;
margin-left: 31px;
margin-right: 31px;
}

p{
  color: black;
  font-family: 'PT Serif', serif;
  text-align: center;


}

#projects {
  font-family: 'Playfair Display', serif;
  color: black;
  font-size: 20px;
  text-align: center;

}
#resume {
  font-family: 'Playfair Display', serif;
  color: black;
  font-size: 40px;
  text-align: center;

}

#mywork {
  font-family: 'Playfair Display', serif;
  color: black;
  font-size: 30px;
  text-align: center;

}

h1{
  color:black;
  font-family: 'Lato', sans-serif;
  font-size: 40px;
  list-style-type: none;


}

h2{
  font-family: 'Playfair Display', serif;
  color: black;
  font-size: 20px;
  text-align: center;

}

h3 {
  font-family: 'Playfair Display', serif;
  color: black;
  font-size: 20px;

}
 h4 {
   font-family: 'Playfair Display', serif;
   color: black;
   font-size: 25px;

 }
body {
  background-color:#F9F9E9 ;
}
  #contact {
    font-family: 'Playfair Display', serif;
    color: black;
    font-size: 30px;
    text-align: center;

  }

  #contactemail {
    font-family: 'Playfair Display', serif;
    color: black;
    font-size: 20px;
    text-align: center;

  }

img {
  border: none;
}

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

  .cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }


}

@media screen and (max-width: 600px) {
  #nav {
  	flex-direction:column;
  	justify-content: space-around;
  }

  .cards {
      display: grid;
      grid-template-columns: 1fr;
  }

}

body {
  background-color: #F9F9E9;
  font-family: Helvetica, Arial, sans-serif;
}

nav ul li {
    display: block;
    border-top: 1px #F8E5FC solid;
}

nav a {
    color:white;
    display: block;
    text-decoration: none;
    padding: 20px 30px;
}

header {
    display: flex;
    flex-flow: row;
    background-color:#D5CED6  ;
    margin: 4;
    padding: 0 10px;
}

.menu-trigger {
    order: 1;
    font-size: 1.75em;
    width: 1em;
}

header h1 {
    order: 2;
    font-size: 2em;
}

nav ul {
    display: none;
}

@media screen and (min-width: 700px){

    nav ul {
        display: flex;
    }

    nav ul li {
        border-top: none;
    }

    .menu-trigger {
        display: none;
    }

    header h1 {
        order: 1;
    }

    nav {
        order: 2;
    }

}