body > header {
  // FIXME responsive

  position: fixed;
  top: 0;
  z-index: 100;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--toolbar-height);
  padding: 0 var(--container-margin);
  box-shadow: 0 var(--space-1) var(--space-2) var(--darken-1);
  background: var(--primary);
  color: var(--primary-txt);

  .logo img {
    height: calc(var(--toolbar-height) - (2 * var(--space-2)));
  }

  nav {
    display: flex;
    align-items: center;

    a {
      display: block;
      text-transform: uppercase;
      padding: 0 var(--space-3);
      text-decoration: none;
      line-height: calc(var(--toolbar-height) - (4 * var(--space-2)));;
      color: inherit;
      opacity: .5;
      font-weight: 200;
      transition: all var(--animation);
      border-bottom: medium solid transparent;
      border-radius: 5%;

      &:focus, &:hover {
        text-shadow: var(--extruded-dark);
        opacity: .75;
      }

      &.active {
        opacity: 1;
        border-bottom-color: currentColor;

      }
    }
  }
}