.topbar {
  background: rgb(var(--rgb-background-night) / 0.86);
  backdrop-filter: blur(0.75em);
  border-bottom: var(--border-width) solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__inner {
  align-items: center;
  display: flex;
  gap: var(--space-large);
  margin-inline: auto;
  padding: var(--space-small) var(--space-large);
  width: min(100%, var(--width-page));
}

.topbar__brand {
  align-items: center;
  color: var(--color-terminal-white);
  display: flex;
  flex-shrink: 0;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.7em;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.topbar__mark {
  color: var(--color-green);
  height: 1.4em;
  width: 1.4em;
}

.topbar__mark svg {
  display: block;
  height: 100%;
  width: 100%;
}

.topbar__links {
  display: flex;
  gap: var(--space-large);
  list-style: none;
  margin-inline: auto;
  overflow-x: auto;
  padding-block: 0.2em;
  scrollbar-width: none;
  white-space: nowrap;
}

.topbar__links::-webkit-scrollbar {
  display: none;
}

.topbar__links a {
  color: var(--color-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
}

.topbar__links a[aria-current="page"] {
  color: var(--color-turquoise);
}

.topbar__actions {
  flex-shrink: 0;
}



@media(hover: hover) {

  .topbar__brand:hover {
    color: var(--color-white);
  }

  .topbar__brand:hover .topbar__mark {
    color: var(--color-turquoise);
  }

  .topbar__links a:hover {
    color: var(--color-white);
  }

}



@media(min-width: 64em) {

  .topbar__inner {
    padding-inline: var(--space-xx-large);
  }

}



@media(max-width: 34em) {

  .topbar__brand span {
    display: none;
  }

  .topbar__links {
    display: none;
  }

  .topbar__inner {
    justify-content: space-between;
  }

}