@layer base {
html {
  font-size: 15px;
  scroll-behavior: auto;
  scroll-padding-block-start: calc(var(--header-h) + var(--space-md));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  hyphens: manual;
  overflow-wrap: break-word;
  overflow-x: clip;
}

:lang(de) {
  hyphens: auto;
}

:lang(cs) {
  hyphens: manual;
}

h1,
h2,
h3 {
  line-height: var(--lh-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

::selection {
  background-color: color-mix(in srgb, var(--color-purple) 22%, #fff);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}