/* Large mobile mode */
@media (max-width: 901px) {
  header.mobile-only {
    max-width: 100%;
    height: 4.5rem;
    padding: 0;
    z-index: 5;
    background-color: var(--contrast-color);
    box-shadow: 0 .5rem .5rem -.5rem var(--main-color-);
    position: relative; /* Requried to prevent sibling with background color from covering box-shadow */
  }

  header.mobile-only nav {
    width: calc(100vw - 6rem);
    margin: 0 auto;
    height: 100%;
    position: relative;
  }

  header.mobile-only nav a {
    display: inline-block;
  }

  /* About link */
  header.mobile-only nav a:first-of-type {
    font-weight: bold;
    font-size: 1rem;
    position: absolute;
    left: 0;
    top: calc(50% - .5rem);
  }

  /* Logo link */
  header.mobile-only nav a#mobile-logo-link {
    display: inline-flex;
    align-items: center;
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    margin: 0 auto;
    background-color: var(--contrast-color);
    box-shadow: 0 .5rem .5rem -.5rem var(--main-color-);
    z-index: 2;
    position: absolute;
    left: calc(50% - 3.5rem);
    bottom: calc(50% - 3.85rem);
  }

  /* Logo */
  header.mobile-only nav a#mobile-logo-link img {
    height: 7rem;
    width: 7rem;
    padding: 1rem 1.5rem;
    z-index: 5;
    border-radius: 50%;
  }

  /* Mailto envelope link */
  header.mobile-only nav a:last-of-type {
    position: absolute;
    right: 0;
    top: calc(50% - .75rem); /* 50% of height - 50% of nested image's height */
  }

  header.mobile-only nav a:last-of-type img {
    height: 1.5rem;
  }
}

@media (max-width: 769px) {
  header.mobile-only nav {
    width: calc(100vw - 4rem);
  }
}

/* Small mobile mode */
@media (max-width: 561px) {
  header.mobile-only nav {
    width: calc(100vw - 4rem);
  }
}