@import url('../../globals.css');

.header {
  display: flex;
  align-items: center;
  background: var(--color-green) var(--gradient-green);
  box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
  padding: 0 var(--content-margin);
  margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin));
  position: relative;
  color: var(--color-black);

  &:after {
    content: attr(data-banner);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    line-height: var(--header-height);
    text-transform: uppercase;
    text-align: center;
    font-size: calc(var(--header-height) * 0.7);
    font-weight: bold;
    opacity: 0.2;
  }

  & h1 {
    flex-grow: 1;
    font-family: 'Bangers', 'cursive';
    font-size: 4rem;
    font-weight: normal;
    display: inline-block;
    margin: 0;
    line-height: var(--header-height);
    text-shadow: 0 0 5px var(--color-green);
  }

  & a {
    text-decoration: none;
    display: inline-block;
  }

  & ul {
    @apply --inline-list;
    text-align: right;
  }

  & li {
    margin-left: 1em;

    & a:hover,
    & a:active {
      text-decoration: underline;
    }

    & svg {
      display: inline-block;
      width: 1em;
      height: 1em;
      margin-right: 0.5rem;
      vertical-align: text-top;
    }
  }
}