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

html {
  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 {
  --color-bg: #141414;
  --color-text: #8fc2c7;
  --color--link: white;
}
@media screen and (prefers-color-scheme: light) {
  :root {
    --color-bg: #a1e5e8;
    --color-text: #0a0c0c;
    --color--link: black;
  }
}

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 {
  font-size: 0.8em;
}

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