/* ** Reset from https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after { box-sizing: border-box; }
/* 2. Remove default margin */
*:not(dialog) { margin: 0; }
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
/* 4. Add accessible line-height */
body { line-height: 1.5; }
/* 5. Improve text rendering (only for high dpi...?) */
body { -webkit-font-smoothing: antialiased; }
/* 6. Improve media defaults */
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* 7. Inherit fonts for form controls */
input, button, textarea, select { font: inherit; }
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* 9. Improve line wrapping */
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/* 10. Create a root stacking context */
#root, #__next { isolation: isolate; }

/* my own stuff */
html { overscroll-behavior-y: none; }
p, ul { margin-bottom: 1.5rem; &:last-child { margin-bottom: 0; } }
iframe { border: none; display: block; }

/* https://chrisnager.github.io/ungrid is convenient */
@media (min-width: 30em) {
  .row { width: 100%; display: table; table-layout: fixed; border-spacing: 10px 0; }
  .col { display: table-cell; }
}

body {
	margin: 40px auto;
	max-width: 770px;
	line-height: 1.4;
	color: #222;
	padding: 0 1em;
	background: #FEFEFE;
	font-size: 1.1em;
}
nav {
	margin-bottom: 2rem;
}
h1, h2, h3 { font-family: sans-serif; }
h1 { font-size: 1.8em; color: #444; margin-bottom: 1rem; }
h2 { line-height: 1.2; color: #333; border-bottom: 1px solid #666; margin-bottom: 1rem; }
pre, code {
	font-size: 1.1em;
	font-family: monospace;
	background-color: #F6F6F4;
	color: #000;
}
code { color: #000; background: #EFC; }
pre { overflow-x: auto; padding: 1em; }
pre code { color: #000; background-color: default; border: none; }
table { border-collapse: collapse; }
td, th { padding: .7em; border: 1px solid #AAA; }

/* forms */
textarea, input, button {
	background: #FAFAFA;
	color: #000;
	border: 1px solid #888;
	padding: .3em;
	margin: .3em;
}
input:disabled { color: #666; }
textarea { width: 90%; padding: .5em; display:block; }
button { border-radius: 4px; }
button:hover { background: #FAFAAA; }