11ty/css/main.css

:root {
	color-scheme: light dark;
}

/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {
  box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
}

*:not(dialog) {
  margin: 0; /* 2. Remove default margin */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords; /* 3. Enable keyword animations */
  }
}

body {
  line-height: 1.5; /* 4. Increase line-height */
  -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
}

img, picture, video, canvas, svg {
  display: block; /* 6. Improve media defaults */
  max-width: 100%; /* 6. Improve media defaults */
  height: auto; /* 6. Improve media defaults */
}

input, button, textarea, select {
  font: inherit; /* 7. Inherit fonts for form controls */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* 8. Avoid text overflows */
}

p {
  text-wrap: pretty; /* 9. Improve line wrapping */
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance; /* 9. Improve line wrapping */
}

#root, #__next {
  isolation: isolate; /* 10. Create a root stacking context */
}