:root {
  --selection-bg: rgba(113, 129, 109, 0.34);
  --selection-text: currentColor;
  --page-fade-bg: #f0f4f8;
}

body.is-dark,
body.dark-mode,
html.is-dark body {
  --selection-bg: rgba(113, 129, 109, 0.42);
}

html {
  background-color: var(--page-fade-bg, #f0f4f8);
}

html:has(body.is-dark),
html:has(body.dark-mode),
html.is-dark {
  --page-fade-bg: #0d0d0d;
}

::selection {
  color: var(--selection-text);
  background: var(--selection-bg);
  text-shadow: none;
}

::-moz-selection {
  color: var(--selection-text);
  background: var(--selection-bg);
  text-shadow: none;
}

html.page-fade-ready body {
  opacity: 1;
  transition: opacity 280ms ease;
}

html.page-fade-enter body,
html.page-fade-leave body {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.page-fade-ready body {
    transition: none !important;
  }

  html.page-fade-enter body,
  html.page-fade-leave body {
    opacity: 1 !important;
  }
}