/* Phone screens */
@media (max-width: 640px) {
  header {
    height: 100vh;
    width: 100%;
  }

  nav ul {
    margin: 0;
  }

  nav ul li {
    padding: 1rem 0;
    border-bottom: 1px solid #ddd;
  }

  nav ul li:last-of-type {
    border-bottom: none;
  }

  .hidden-small {
    display: none;
  }

  .job-timeline {
    padding-left: 1.5rem;
  }

  /* The circles on the timeline */
  .professional-experience::before {
    left: calc(-1.5rem - 8px);
  }

  .full-width-divider {
    margin: 1.5rem auto 2.5rem auto;
  }
}

/* Tablets + Desktop screens */
@media (min-width: 640px) {
  nav {
    height: 100%;
  }

  nav ul#site-navigation {
    padding-left: 1.5rem;
  }

  nav ul li {
    display: inline;
    margin: 0 3rem;
  }

  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
  }

  .has-docked-nav .navbar-spacer {
    display: block;
  }

  .half-column-section {
    display: table;
    width: 100%;
  }

  .half-project {
    width: 48%;
    margin: 0 2% 0 0;
    float: left;
  }

  .hidden img {
    width: 40%;
    margin: 2rem 5%;
    float: left;
  }

  .wide-showcase-img {
    width: 40%;
    margin: 2rem 5%;
    float: left;
  }

  .narrow-showcase-img {
    width: 20%;
    margin: 2rem 5%;
    float: left;
  }

  .company-showcase-img {
    width: 14%;
    margin: 2rem 18%;
  }

  .hidden-big {
    display: none;
  }
}