header {
  nav {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-height: 15em;

    background-color: black;
    font-size: 1.1em;
    color: #666;

    & :link, & :visited {
      text-decoration: none;
      border-bottom: 1px solid #333;
      color: #a2a2a2;
    }

    ul {
      list-style: none;
      white-space: nowrap;

      li {
        display: inline-block; /* 6 */
        padding: 0.3em 0.2em 0.5em;
        margin: 0 0.5em;
      }
    }

    a:hover {
      color: white;
      border-bottom: 1px solid #555;
    }

    .selected {
      border-top: 4px solid white;
      font-weight: bold;

      a:link, a:visited {
        color: white;
        text-decoration: none;
        border-bottom: none;
      }

      &.blue {
        border-top: 4px solid #3f9cea;
      }

      &.green {
        border-top: 4px solid #5cbe40;
      }

      &.yellow {
        border-top: 4px solid #ffee00;
      }

      &.pink {
        border-top: 4px solid #f655a0;
      }

      &.red {
        border-top: 4px solid #f61b14;
      }
    }
  }
}

@media (min-width: 31.25em) {
  header{
    max-height: none;
    overflow: hidden;

    nav ul {
      width: 100%;
    }
  }
}