*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  color-scheme: light dark;
  box-sizing: border-box;
  font-family: system-ui, monospace, sans-serif;
  interpolate-size: allow-keywords;
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
  --accent-color: gray;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  accent-color: var(--accent-color);
}

select option:checked {
  background-color: var(--accent-color);
}

canvas,
iframe,
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}