body {
  background-color: var(--color-surface-main);
  color: var(--color-text-main);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--color-text-link);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
}

p {
  font-family: var(--font-serif);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--size-three);
}

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

::view-transition-old(root) {
  animation: 160ms ease both fade-out;
}

::view-transition-new(root) {
  animation: 160ms ease both fade-in;
}