* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
  }
  
  body {
    background-color: #75543B;
  }

  .nav_bar {
    background-color: #75543B;
    list-style-type: none;
    padding: 50px 120px;
    text-align: right;
  }
  
  .nav_bar li {
    display: inline-block;
  }
    
  .nav_bar li a {
    color: #FAF5ED;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    padding: 0px 25px;
  }

  .nav_bar li a:hover {
    color: #F2C784;
    transition: color 0.5s;
  }

  .nav_line {
    border: 1px solid #FAF5ED;
    width: 28px;
    margin-left: 24px;
  }

  .hamb {
    display: none;
  }

  .header {
    background-color: #59402C;
    padding: 80px 0px;
    text-align: center;
  }

  #home-header {
    background-color: #59402C;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 50px 240px;
    flex-wrap: wrap;
  }

  #me-img {
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 50%;
    margin: 15px 50px;
  }
   
  h1 {
    color: #F2C784;
    font-family: 'Indie Flower';
    font-size: 45px;
  }

  h2 {
    color: #EBEFF0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 27px;
  }
  
  h3 {
    color: #FAF5ED;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
  }

  h4 {
    color: #F5C7A9;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
  }
  
  h5 {
    color: #F2C784;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
  }

  h6 {
    color: #FAF5ED;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
  }

  .home_line, .projects_line {
    border: 1px solid #F2C784;
    width: 200px;
    margin-top: 35px;
    /* center the line */
    margin-right: auto;
    margin-left: auto;
  }

  .body a {
    color: #FAF5ED;
    text-decoration: none;
  }

  .body a:hover {
    color: #F2C784;
    transition: color 0.5s;
  }

  .resume_line {
    border: 1px solid #FAF5ED;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .resume_split {
    display: flex;
    justify-content: space-between;
  }

  .body ul li {
    color: #FAF5ED;
    margin-left: 25px;
  }

  @media only screen and (min-width: 1050px) {
    .body {
      padding: 50px 200px 0px 200px;
    }
    #intro_body {
      padding: 50px 260px 0px 260px;
    }
  }

  @media only screen and (max-width: 1050px) {
    .nav_bar {
      padding: 40px 100px;
    }
    .nav_bar li a {
      padding: 0px 22px;
    }
    .nav_line {
      margin-left: 20px;
    }
    .body {
      padding: 50px 100px 0px 100px;
    }
  }

  @media only screen and (max-width: 710px) {
    .nav_bar {
      padding: 30px 80px;
    }
    .nav_bar li a {
      font-size: 16px;
      padding: 0px 18px;
    }
    .nav_line {
      width: 22px;
      margin-left: 16px;
      border-width: 0.5px;
    }
    .header {
      padding: 40px 0px;
    }
    #me-img {
      width: 270px;
      height: 270px;
    }
    .body {
      padding: 50px 80px 0px 80px;
    }
    #resume_body, #projects_body, #exploration_body {
      margin-top: -30px;
    }
    h1 {
      font-size: 30px;
    }
    h2 {
      font-size: 20px;
    }
    h3 {
      font-size: 14px;
    }
    h4 {
      font-size: 16px;
    }
    h5 {
      font-size: 15px;
    }
    h6 {
      font-size: 11px;
    }
  }

  @media only screen and (max-width: 550px) {
    .nav_bar {
      padding: 20px 50px;
    }
    .nav_bar li a {
      padding: 0px 13px;
    }
    .nav_line {
      margin-left: 12px;
    }
    .header {
      padding: 20px 0px;
    }
    #home-header {
      padding: 50px 20px;
    }
    .body {
      padding: 50px 50px 0px 50px;
    }
    .home_line {
      width: 150px;
    }
    h5 {
      font-size: 14px;
    }
  }

  @media only screen and (max-width: 500px) {
    .nav_bar {
      padding: 60px 50px 20px 35px;
    }
    .nav_bar li {
      display: block;
      padding: 10px 0px;
    }
    .nav_bar li a {
      display: flex;
      justify-content: left;
      padding: 0px;
    }
    .nav_line {
      margin-left: -2px;
    }
    .nav_menu {
      padding: 20px 30px 20px;
      display: flex;
    }
    .hamb {
      display: block;
      z-index: 2;
      color: #FAF5ED;
    }
    nav {
      position: absolute;
      top: -100%;
      transition: 0.3s ease-in-out;
    }
    nav.active {
      top: 0;
    }
    #me-img {
      width: 240px;
      height: 240px;
    }
    .body {
      padding: 50px 40px 0px 40px;
    }
    h2 {
      font-size: 16px;
    }
    h3 {
      font-size: 12px;
    }
    h4 {
      font-size: 14px;
    }
    h5 {
      font-size: 13px;
    }
    h6 {
      font-size: 9px;
    }
    .resume_line {
      border: 0.5px solid #FAF5ED;
    }
    .body ul li {
      margin-left: 20px;
    }
    .body ul li::marker {
      font-size: 11px;
    }
  }
  
  .captioned {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .captioned_image {
    width: 480px;
  }

  #photography {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 150px 100px 150px;
  }
  
  .photo_col {
    flex: 25%;
    max-width: 25%;
    padding: 0 2px;
  }

  .photo_col img {
    width: 100%;
  }
  
  @media screen and (max-width: 1000px) {
    .photo_col {
      flex: 50%;
      max-width: 50%;
    }
  }

  @media screen and (max-width: 710px) {
    .captioned_image {
      width: 360px;
    }
    #photography {
      padding: 0px 80px 100px 80px;
    }
  }

  @media screen and (max-width: 500px) {
    .captioned_image {
      width: 250px;
    }
    #photography {
      padding: 0px 40px 50px 40px;
    }
  }