.header {
  padding: 20px;
  font-size: 1.125rem;
  background-color: $c-primary;

  @include at-m {
    padding: 40px;
  }

  &_postmark {
   font-size: .625rem;
   color: $c-secondary;
   position: absolute;
   bottom: -18px;
   right: 5px;
  }

  &_postmark-icon {
    display: inline-block;
    background-image: url('../images/postmark-stamp-purp.svg');
    background-size: 100%;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    vertical-align: -2px;
  }

  a {
    color: $c-secondary;
  }

  &_logo {
    position: relative;
    margin-bottom: 2em;

    @include at-m {
      margin-bottom: 0;
    }
  }

  &_logo &_logo-link {
    text-decoration: none;
    font-weight: 700;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 auto;
    background-image: none !important;

    span {
      position: relative;
      padding: 1px 3px 2px 6px;
      background-color: $c-secondary;
      color: $c-primary;
    }

    &:hover {
      opacity: 1;
    }

    &:hover span {
      background-color: $c-primary;
      color: $c-secondary;
    }

    @include at-m {
      margin: 0;
    }
  }

  &_container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
    flex-direction: column;
    align-items: center;

    @include at-m {
      flex-direction: row;
    }
  }

  &--inverted {
    background-color: $c-purp-dark;
  }
  &--inverted .navigation_link,
  &--inverted &_logo a {
      color: $c-primary;
      background-image: linear-gradient(to bottom, transparent 50%, $c-yellow 50%);
  }
  &--inverted .navigation_github {
    color: $c-primary;
  }
  &--inverted &_logo a span {
    color: $c-purp-dark;
    background-color: $c-primary;

    &:hover {
      background-color: $c-purp-dark;
      color: $c-primary;
    }
  }
  &--inverted &_postmark {
    color: $c-primary;
  }
  &--inverted &_postmark-icon {
    background-image: url('../images/postmark-stamp-yellow.svg');
  }
}

