header {
  width: 100%;
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: center;
  background-color: #1c1c1c44;
  border-bottom: 1px #3338 solid;
  backdrop-filter: blur(4px);
  user-select: none;
  z-index: 100;
  animation: headerAppear 1.5s;
  transition-duration: 500ms;

  @keyframes headerAppear {
    from { transform: translateY(-48px); }
    to { transform: none; }
  }

  > div {
    height: 48px;
    width: min(100vw, 1280px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;

    a {
      font-family: Consolas;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }

    @media (min-width: 840px) { > div.left, > div.right { min-width: 128px; } }

    > div.left {
      font-size: 24px;
      > a { font-family: Pacifico; }
      > span { font-size: 32px; }
    }

    > div.right {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: flex-end;

      > span { cursor: pointer; }

      > button {
        background-color: transparent;
        border: none;
        cursor: pointer;
      }
    }

    > div.center {
      padding-left: 16px;
      margin-right: auto;

      > ul {
        display: flex;
        gap: 8px;
        list-style-type: none;
        font-size: 20px;

        @media (max-width: 640px) { display: none; }

        > li {
          height: 36px;
          display: flex;
          align-items: center;
          border-radius: 18px;
          padding: 0 12px;
          backdrop-filter: blur(8px) brightness(2);
          transition-duration: 200ms;

          &:hover { backdrop-filter: blur(8px) brightness(3); }
          &:active { transform: scale(0.8); }
        }
      }
    }
  }
}