michaelchadwick/ember-remember-stuff

.nav-bar {
  display: block;

  @media (min-width: 768px) {
    align-items: center;
    display: flex;
  }

  h1 {
    display: inline-block;
    padding: 0 0.5em 0 0;
    font-size: 2em;
    color: #ff6338;
    margin-block-end: 0.5em;
    text-shadow: 2px 2px 2px #5d0202;
    text-transform: small-caps;

    @media (min-width: 768px) {
      font-size: 1.4em;
      margin-block-end: 0;
    }

    @media (min-width: 992px) {
      font-size: 1.8em;
    }

    @media (min-width: 1200px) {
      max-width: 150px;
    }

    &:hover {
      color: #ff7752;
    }
  }

  .links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0;

    @media (min-width: 768px) {
      margin-block-end: -1.25em;
      padding: 0.25em 0.5em 0.25em 1em;
    }

    @media (min-width: 992px) {
      margin-block-end: -1.75em;
    }

    a {
      display: inline-block;
      font-size: 1em;
      font-weight: bold;
      padding: 0 0.75em 0.5em 0;
      position: relative;
      text-decoration: none;

      @media (min-width: 768px) {
        font-size: 1.1em;
        padding-bottom: 0;
      }

      &:hover,
      &.active {
        opacity: 1;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }
}