@font-face {
  font-family: 'Inter';
  src: url('https://fonts.scalar.com/inter-latin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://fonts.scalar.com/mono-latin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --scalar-custom-header-height: 60px;
}

.custom-header {
  height: var(--scalar-custom-header-height);
  background-color: var(--scalar-background-1);
  box-shadow: inset 0 -1px 0 var(--scalar-border-color);
  color: var(--scalar-color-1);
  font-size: var(--scalar-font-size-2);
  padding: 0 18px;
  position: sticky;
  justify-content: space-between;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 40px;
}

.logo-link {
  padding: 0;
  line-height: 0;
}

.custom-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Inter', sans-serif;
  border-bottom: 1px solid;
  line-height: 10px;
  margin-top: 10px;
  height: 80%;
  margin-right: 40px;
}

.custom-header a {
  position: relative;
  color: var(--scalar-color-1);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
}

.custom-header a:hover {
  color: var(--scalar-color-2);
}

.custom-header nav a {
  padding: 0 4px 6px;
}

.logo-link .logo-img {
  display: block;
}