:root {
  color-scheme: light dark;

  --bg: #fafafa;
  --text: #222222;
  --text-2: #505050;
  --rule: #222222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --text: #f5f5f5;
    --text-2: #b8b8b8;
    --rule: #f5f5f5;
  }
}

:root[data-theme="light"] { --bg: #fafafa; --text: #222222; --text-2: #505050; --rule: #222222; color-scheme: light; }
:root[data-theme="dark"]  { --bg: #0a0a0a; --text: #f5f5f5; --text-2: #b8b8b8; --rule: #f5f5f5; color-scheme: dark; }

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

h2 {
  color: var(--text);
}

a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

table,
th,
td {
  border-color: var(--rule);
}

td:first-child,
footer,
footer a {
  color: var(--text-2);
}

header img {
  color: var(--text);
}