div.home-wrapper {
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-width: min(100vw, 750px);
  padding: 1rem 1rem;

  @media only screen and (width <= 599px) {
    padding: 0.5rem 0.5rem;
  }

  nav.site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    --link-padding: 1rem;

    a.header-link {
      display: block;
      padding: var(--link-padding);
      transition:
        box-shadow 0.2s,
        color 0.2s;
      border-radius: var(--space-s);

      &.active {
        color: var(--accent2);
      }

      &:hover,
      &:focus {
        outline: none;
        text-decoration: none;
        box-shadow: 0px 4px 20px 2px
          color-mix(in srgb, var(--accent2) 25%, transparent);
      }
    }

    ul.header-link-list {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none;
      gap: 1rem;

      li:first-of-type {
        /* left align header */
        margin-left: calc(var(--link-padding) * -1);
      }

      @media only screen and (width <= 900px) {
        --link-padding: 0.8rem;
        gap: 0.5rem;
      }
    }

    .header-right {
      display: flex;
      gap: 1rem;
      align-items: center;
      #search-icon.active {
        color: var(--accent2);
      }
      button.icon-button {
        padding: 0;
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
      }
    }
  }

  main.site-content {
    flex-grow: 1;
    /* grid-area: body; */
    img {
      height: auto;
      max-width: 100%;
    }
  }

  footer {
    padding-top: 1rem;
    font-size: 0.8em;
    &,
    a {
      color: var(--subtle);
    }
    a {
      text-decoration: underline;
    }
    & > nav {
      display: flex;
      gap: 1rem;
      justify-content: center;
    }
  }
}

#brain-made-mark {
  display: block;
  width: 150px;
  svg {
    width: 100%;
  }
}

button#theme-toggle .eleventy-emoji {
  display: none;
}

html[data-theme="mocha"] {
  button#theme-toggle .eleventy-emoji[aria-label="mocha theme"] {
    display: block;
  }
}
html[data-theme="macchiato"] {
  button#theme-toggle .eleventy-emoji[aria-label="macchiato theme"] {
    display: block;
  }
}
html[data-theme="frappe"] {
  button#theme-toggle .eleventy-emoji[aria-label="frappe theme"] {
    display: block;
  }
}
html[data-theme="latte"] {
  button#theme-toggle .eleventy-emoji[aria-label="latte theme"] {
    display: block;
  }
}