:root {
  // Regular Fonts used by default:
  --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
  //Good CLS, sorted by Size: Arimo(0.002), Roboto(0.002), Lato(0.002)

  // Monospace Fonts used for code:
  --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;
  // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/

  // Colors
  --f1: #111; //font color 1
  --f2: #222; //font color 2

  --c1: #fafafa; //color 1
  --c2: #def; //color 2
  --c3: #137; //color 3
  --c4: #013; //color 4

  --a1: #06e; //accent color 1 link
  --a2: #09f; //accent color 2 hover,focus
  --a3: #07f; //accent color 3 h1-h2 hover,focus

  --cg: #483; //ins green
  --cr: #c22; //del red
}
@media (prefers-color-scheme: dark) {
  :root {
    --f1: #ccc; //font color 1
    --f2: #ddd; //font color 2

    --c1: #111; //color 1
    --c2: #123; //color 2
    --c3: #345; //color 3
    --c4: #789; //color 4

    --a1: #09f; //accent color 1 link
    --a2: #0bf; //accent color 2 hover,focus
    --a3: #0af; //accent color 3 h1-h2 hover,focus

    --cr: #e33; //del red
  }
}