global.css

* {
  box-sizing: border-box;
}

:root {
  --black: #000;
  --near-black: #222;
  --white: #fff;
  --firebrick: #b22222;
  --orange-red: #ff4500;
  --blue: #00f;
  --deep-sky-blue: #00bfff;
  --purple: #800080;
  --orchid: #da70d6;
}

body {
  width: 88%;
  max-width: 40em;
  margin: 1em auto;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--black);
  background: var(--white);
}

a:link {
  color: var(--blue);
}

a:visited {
  color: var(--purple);
}

a:active {
  color: var(--firebrick);
}

code {
  color: var(--firebrick);
}

small {
  font-size: inherit;
}

[aria-expanded] {
  display: flex;
  align-items: center;
}

[aria-expanded]::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.25em;
  background: currentColor;
}

[aria-expanded='false']::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

[aria-expanded='true']::before {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--white);
    background: var(--near-black);
  }

  a:link {
    color: var(--deep-sky-blue);
  }

  a:visited {
    color: var(--orchid);
  }

  a:active {
    color: var(--orange-red);
  }

  code {
    color: var(--orange-red);
  }
}