#header-tilde,
#header-bracket,
#header-underscore {
  fill: var(--highlight-fg-color);
}

#header-k,
#header-o,
#header-e,
#header-h,
#header-r {
  fill: var(--header-fg-color);
}

#header-underscore {
  animation: fade 2s linear infinite;
}

@keyframes fade {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.0;
  }

  60% {
    opacity: 0.0;
  }

  80% {
    opacity: 1.0;
  }

  100% {
    opacity: 1.0;
  }
}

#main-menu {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2em;
  list-style: none;
  justify-content: center;
}

body>header:not(.small) + #main-menu {
  position: fixed;
  color: red;
  top: var(--header-height);
  height: 1.2em;
  width: 100vw;
  padding: .1em 0;
  background: black;
}
body>header.small + #main-menu {
  color: green;
  margin: 2em 0;
}