/* non-color rules that apply globally */
body {
  font-family: system-ui, -apple-system, sans-serif;
  text-align: center;
}
a {
  text-decoration: none;
}
h1 {
  font-size: 1.8em;
}
.dark-mode-toggle {
  cursor: pointer;
  padding: 1em;

  /* hide toggle until we're sure user has JS enabled */
  visibility: hidden;
}

/* theme-specific rules -- you probably only want color-related stuff here. */
/* SCSS makes this a whole lot easier by allowing nesting, but is not required. */
body.light {
  background-color: #fff;
  color: #222;
}
body.light a {
  color: #06f;
}
body.dark {
  background-color: #222;
  color: #fff;
}
body.dark a {
  color: #fe0;
}