.menu {
  --border-width: 1px;
  --border-color: var(--gray-3);
  --space: var(--size-fluid-2);
  --shadow: var(--shadow-1);

  position: sticky;
  top: 0;
  z-index: 1;
  isolation: isolate;

  padding-inline: var(--space);
  border-bottom: var(--border-width) solid var(--border-color);
  background-color: white;
  min-height: 100%;
  box-shadow: var(--shadow);
}

/* 1200px is the right size for links to fit */
@media (min-width: 1200px) {
  .show-when-navbar-has-space {
    display: block;
  }

  .hide-when-navbar-has-space {
    display: none;
  }
}

.menu-nav {
  margin-bottom: var(--space);
}

.menu-navbar-wrapper {
  --min-height: var(--size-fluid-5);

  min-height: var(--min-height);

  & h1 a {
    text-decoration: none;
    color: var(--text-1);
  }

  & a > img {
    max-height: var(--min-height);
    max-width: var(--size-13);
    width: auto;
    padding-block: var(--size-2);
  }
}