:root {
  --text-color: #383c3f;
}

body {
  font-family: "Noto Sans", sans-serif;
  margin: 0;
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black; // Don't flashbang dark theme users (CSS loads faster than JS)
  }
  // Javascript does this
  // :root {
  //   --text-color: white;
  // }
}

a {
  transition-duration: 0.2s;
}

a:link {
  color: #2194ff;
}

a:visited {
  color: #2178ff;
}

a:link:hover {
  color: #21afff;
}

a:visited:hover {
  color: #21afff;
}

a.text-color {
  color: var(--text-color);
}

a.text-color:hover {
  color: #21afff;
}

p.justify {
  text-align: justify;
  text-justify: auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;

  @media (width >= 64rem) {
    width: 60%;
  }
}