@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/manrope-latin-400-normal.woff2) format(woff2);
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

html {
  color-scheme: light dark;

  font:
    normal 400 16px 'Manrope',
    sans-serif;
  color: light-dark(oklch(21% 0.006 285.885), oklch(92% 0.004 286.32));

  background-color: light-dark(
    oklch(96.7% 0.001 286.375),
    oklch(21% 0.006 285.885)
  );
}

body {
  margin: 0;
}

main {
  margin-block: 20rem;
  margin-inline: auto;

  width: min(800px, 80dvw);
}

h1 {
  margin: 0;

  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
}

p {
  margin-block: 2rem 1.5rem;

  line-height: 1.75;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 2rem;
}

a {
  color: currentColor;
  text-decoration: none;

  opacity: 0.75;

  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

  &:hover,
  &:focus-visible {
    opacity: 1;
  }
}