/**
 * Header
 */

@media screen {

  #header,
  .header-content {
    display: flex;
  }

  #header {
    margin-top: 0;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary);
    color: var(--text-inverted);
    padding: 0.5rem var(--gutter);
    box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.2);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .header-content {
    margin-top: 0;
  }

  .header-content > * + * {
    margin: 0 0 0 1em;
  }

  @supports(padding: max(0px)) {

    #header {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
  }

  /**
   * Main title
   */
  .main-title {
    font-size: 1.2em;
  }

  .main-title .icon {
    fill: currentColor;
    transform: scale(1.6) translateY(-1px);
    margin: 0 0.5em 0 0.25em;
  }

  /**
   * Header links
   */
  #header a {
    color: currentColor;
    text-decoration: none;
  }

  /**
   * Triggers (used to activate menus)
   */
  #header label {
    cursor: pointer;
    font-weight: 400;
  }
}