/* inspired by:
  * https://www.swyx.io/css-100-bytes
*/

html {
  box-sizing: border-box;
  min-width: 480px;
  max-width: 80ch;
  padding: 2em 2em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

body {
  margin: 0;
}

/* colors */
/* dark mode by default */
:root,
body {
  --color-bg: #141414;
  --color-text: #8fc2c7;
  --color-contrast: white;
  --color-link: var(--color-contrast);
  --border-width: 1px;
  --font-size-small: 0.8em;
}
@media screen and (prefers-color-scheme: light) {
  :root,
  body {
    --color-bg: #a1e5e8;
    --color-text: #0a0c0c;
    --color-contrast: black;
    --color-link: var(--color-contrast);
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

:link,
:visited {
  color: var(--color-link);
}

/* links on hover switch to default text color */
:link:hover,
:visited:hover {
  color: inherit;
}

/* typo */
body,
button,
input,
select,
textarea {
  font-family: monospace;
}
small,
.small {
  font-size: var(--font-size-small);
}

p {
  max-width: 80ch; /* enforce readable line length */
}

hr {
  border: none;
  border-top: var(--border-width) solid var(--color-contrast);
  margin: 1em 0 calc(-1 * var(--border-width));
}

/* spacing */
hr.spacer {
  border: none;
  height: 0;
  margin: 1em 0;
}

/* tables */
table {
  text-align: left;
}
th,
td {
  vertical-align: text-top;
  padding-inline-end: 1em;
}

blockquote {
  border-inline-start: 3px dotted var(--color-contrast);
  border-color: color-mix(in oklab, var(--color-contrast) 20, var(--color-bg));
  margin: 1em;
  margin-inline-start: 0;
  padding-inline-start: 1em;
}

footer {
  font-size: var(--font-size-small);
}

hr:has(+ footer) {
  margin-top: 2em;
}