body {

    /*background:papayaWhip*/
    background: #F8F7F4;
    font-family: Georgia, sans-serif;
    margin:3em 3em 3em 3em;
}
head {
  margin: 0;
  padding: 0;
}

h2, p {
  margin: 10px;
}

#navbar{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #F8F7F4;
  display: flex;
}

ul li a {
  display: block;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #D5B893;
}
div.side-by-side {
    display: flex;
}

#title {
    display:block;
    padding:1em 1em;
    font-size:6em
    }

img {
    width: 59%;
    max-width: 500px;
}
#headshot {
    width: 59%;
    max-width: 500px;
    padding: 1em
}
#careermaps{

    display: block;
    width: 200%;
    max-width: 1000px;
    height: auto;
    
}
#safeselect{

    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
    
}
#legenderie{

    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
    
}
bio {
/* I could not figure out what I was missing, I wanted each paragraph to take up 30% of the screen when left aligned/* */
    display:block;
    width:30%;
    height:30%;
}
#skills {
    background-color: #617891;
    padding:4em;
}
#twogram{
    display:flex;
    width: 80%;
}
#twogramcontx{
    display:flex;
    width: 80%;
}
#trigram{
    display:flex;
    width: 70%;
}
#firstngram {
    display:flex;
    width: 80%;
}
#clouds {
    display:flex;
    width: 80%;
}
.featureBlock {
    background-color:pink;
    font-size: smaller;
}