html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    font-family: 'Poppins', Sans-serif;
    margin: 0;
}
h1 {
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 4px 4px 5px gray;
}
.topnav {
    overflow: hidden;
    background-color: #ffffff;
    border-bottom: solid;
    border-width: 1px;
    border-color: #dddddd;
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #eeeeff;
    color: #8b0000;
  }
  
  .topnav a.active {
    background-color: #ffffff;
    color: black;
  }
  
  .topnav .icon {
    display: none;
  }
  #name {
      font-weight: 900;
  }
  .mainBody {
      margin-top: 51px;
  }
  .aboutHeader {
      display: flex;
      justify-content: center;
      background-color: #f9f9f9;
      border-bottom: solid;
      border-width: 1px;
      border-color: #dddddd;
      padding: 0 10px;
  }
  .contentColumn {
    flex-direction: column;
    text-align: center;
  }
  .headshot {
    border-radius: 50%;
    width: 175px;
    height: 175px;
  }
  .about2col {
    display: flex;
    justify-content: center;
    padding: 100px 0;
  }
  .aboutme {
    width: 25%;
  }
  .aboutme a {
    text-decoration: none;
    color: darkgrey;
    font-weight: bold;
  }
  .contactme {
    flex-direction: column;
    padding-left: 25px;
  }
  #li-big {
    width: 147px;
    height: 36px;
    padding-left: 10px;
  }
  #gh-big {
    width: 106px;
    height: 43px;
  }
  #gmail {
    width: 48px;
    height: 36px;
    padding-left: 8px;
  }
  #li-small {
    width: 32px;
    height: 32px;
  }
  #email {
    width: 32px;
    height: 32px;
  }
  #gh-small {
    width: 32px;
    height: 32px;
  }
  .nounder {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
  }
  .projectsHeader {
    background-color: #f9f9f9;
    border-bottom: solid;
    border-width: 1px;
    border-color: #dddddd;
    padding: 91px 10px;
    text-align: center;
}
.projects3col{
  display: flex;
  justify-content: space-between;
  padding: 150px 100px;
}
.projects3col img {
  width: 100%;
  height: auto;
  text-align: center;
}
.projectpane {
  width: 30%;
  display: flex;
  flex-direction: column;
}
.projectpane a {
  text-decoration: none;
  color: darkgrey;
  font-weight: bold;
}
.bottomline {
  bottom: 0;
  margin-top: auto;
}
.resumeheader {
  background-color: #f9f9f9;
  border-bottom: solid;
  border-width: 1px;
  border-color: #dddddd;
  padding: 91px 10px;
  text-align: center;
}
.resumeheader a {
  text-decoration: none;
  color: darkgray;
  font-weight: bold;
}
.resume2col {
  display: flex;
  justify-content: center;
  padding-bottom: 85px;
}
.resume2col h2 {
  color: #c32030;
}
.resumeleft {
  flex-direction: column;
  width: 60%;
  padding-right: 10px;
}
.resumeright {
  flex-direction: column;
  width: 30%;
  padding-left: 10px;
  background-color: #355269;
  color: white;
}
.rrbox {
  text-align: left;
}
.rrtext {
  font-size: 3rem;
  font-weight: bold;
  text-shadow: none;
}
#mobileemail {
  display: none;
}
  .bottomnav {
    overflow: hidden;
    background-color: #ffffff;
    border-top: solid;
    border-width: 1px;
    border-color: #dddddd;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    padding-left: 10px;
  }
  .bottomicons {
      justify-content: right;
      padding-right: 20px;
  }
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  @media screen and (max-width: 600px) {
    .about2col {
      display: block;
      padding-top: 50px;
    }
    .aboutme {
      padding-left: 25px;
      width: 95%;
    }
    .contactme {
      padding-top: 30px;
      padding-bottom: 50px;
    }
    .projects3col{
      display: block;
      padding: 25px 15px;
    }
    .projectpane {
      width: 95%;
      padding-bottom: 20px;
      border-bottom: solid;
      border-width: 1px;
      border-color: #dddddd;
    }
    .projects3col img {
      width: 350px;
      text-align: center;
    }
    .resume2col h1 {
      font-size: 1.25rem;
    }
    .resume2col h3 {
      font-size: 1rem;
    }
    #desktopemail {
      display: none;
    }
    #mobileemail {
      display: contents;
      color: white;
      font-weight: bold;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: fixed;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      border-bottom: solid;
      border-width: 1px;
      border-color: #eeeeee;
    }
  }
  .hamburger {
    display: inline-block;
    cursor: pointer;
  }
  
  .bar1, .bar2, .bar3 {
    width: 16px;
    height: 3px;
    background-color: #000000;
    margin: 1px 0;
    transition: 0.4s;
  }
  
  /* Rotate first bar */
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-3px, 3px) ;
    transform: rotate(-45deg) translate(-3px, 3px) ;
  }
  
  /* Fade out the second bar */
  .change .bar2 {
    opacity: 0;
  }
  
  /* Rotate last bar */
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-3px, -3px) ;
    transform: rotate(45deg) translate(-3px, -3px) ;
  }