body {
  margin: 0 auto; width: 720px; max-width: 95%;
  font: 18px/1.5 system-ui, sans-serif;
  background: #fafaff; color: #171717;
}
h1, h2, h3 { font-weight: 300; }
h1 { font-size: 240%; margin-bottom: 0; }
h2 { font-size: 180%; margin-bottom: 0; margin-top: 0.5em; }
h2 + p { margin-top: 0; }
a {
  font-size: 180%;
  text-decoration: none; color: #575757; font-weight: 100;
  filter: grayscale(100%);
  transition: filter 5s;
}
a:hover { color: #000; filter: grayscale(20%); transition: filter 0.5s; }

a[data-friendly]:after {
  content: " " attr(href); color: #48a;
  font-size: 60%;
  transition: color 2s;
}
a[data-friendly]:hover:after { color: #14a; transition: color 0.5s; }

@media (prefers-color-scheme: dark) {
  body { background: #11111a; color: #dddddd; }
  h1, h2, h3, h1 a { color: #fafaff; }
  pre { background: #1a1a1a; border-radius: 10px; }
  blockquote { border-left: 12px solid #dddddd; }

  a { color: #fafaff; }
  a:hover { color: #fff; }

  a[data-friendly]:after { color: #e44d93; filter: grayscale(0%); }
  a[data-friendly]:hover:after { color: #e44d93; }
}