queries.css

@media only screen and (max-width: 1200px) {
  .header-text-box {
    width: 100%;
    padding: 0 2%;
  }

  .row { padding: 0 2%; }

  .portfolio-body {
    padding: 40px;
    max-width: 90%;
  }
}

@media only screen and (max-width: 1023px) {
  body { font-size: 18px; }

  section { padding: 60px 0; }

  .long-copy {
    width: 80%;
    margin-left: 10%;
  }

  .section-portfolio .span-1-of-3 {
    width: 100%;
  }

  .portfolio-flex {
    flex-direction: column;
  }
  
  .portfolio-body {
    padding: 20px;
  }

  .portfolio-col {
    margin: 1em 0 0 0;
  }

  img.screenshot {
    max-width: 80%;
  }

  .contact-form { width: 80%; }

}

@media only screen and (max-width: 767px) {
  body { font-size: 16px; }

  section { padding: 30px 0; }

  .subtitle {
    font-size: 150%;
  }

  .hero-image {
    display: none;
  }
  
  .main-nav { display: none; }

  img#resume-logo,
  img#github-logo,
  img#linkedin-logo {
    width: 60%;
  }

  .contact-form { width: 80%; }

  .footer-buttons { display: none; }

}

@media only screen and (max-width: 480px) {
  section { padding: 25px 0; }

  .contact-form { width: 100%; }

  img#resume-logo,
  img#github-logo,
  img#linkedin-logo {
    width: 20%;
  }

  input { 
    margin-bottom: .5em;
  }

}

@media only screen and (max-height: 670px) {
  .hero-image {
    display: none;
  }
}

@media only screen and (max-height: 400px) {
  h1, .subtitle {
    margin-bottom: 10px;
  }

  .avatar {
    height: 160px;
  }
}

@media only screen and (max-height: 300px) {
  h1, .subtitle {
    margin-bottom: 15px;
  }

  .avatar {
    height: 120px;
  }
}

@media only screen and (max-height: 260px) {
  h1, .subtitle {
    margin-bottom: 15px;
  }

  .avatar {
    display: none;
  }
}