* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  -webkit-text-size-adjust: 100%;
}

/* View transitions. Default is the browser's cross-fade. The theme toggle adds
   .vt-reveal so the old frame stays put while the new one grows over it. */
.vt-reveal::view-transition-old(root),
.vt-reveal::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.vt-reveal::view-transition-old(root) { z-index: 1; }
.vt-reveal::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* Until the component is defined, show nothing instead of a flash of empty page. */
:not(:defined) { visibility: hidden; }