assets/css/theme.css
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-brand: "Arial", serif;

  --color: rgba(0, 0, 0, 1);
  --color-fade: rgba(0, 0, 0, .54);
  --color-nav: rgba(0, 0, 0, .7);

  --background: #ffffff;
  --background-grey: #f9f9f9;
  --background-grey-embed: #f0f0f0;

  --foreground: rgba(247, 247, 247, .25);
  --foreground-hover: rgba(220, 220, 220, .35);

  --foreground-highlight: #f5d41f;
  --color-highlight: #130606;

  --model-background: #ffffff;
  --model-foreground: rgba(247, 247, 247, .25);
  --model-box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);

  --padding: 12px;
  --padding_d2: 6px;
  --padding_x2: 24px;

  --model-blur: 10px;

  --border: #efefef;
  --border-nav: #dddddd;

  --radius: 4px;

  --anchor: #235ce8;
  --hover: #547ce3;

  /* base16 tomorrow */
  --chroma-base00: #f9f9f9;
  --chroma-base01: #e0e0e0;
  --chroma-base02: rgba(159, 218, 159, .2);
  --chroma-base03: #8e908c;
  --chroma-base04: #969896;
  --chroma-base05: #4d4d4c;
  --chroma-base06: #282a2e;
  --chroma-base07: #1d1f21;
  --chroma-base08: #c82829;
  --chroma-base09: #f5871f;
  --chroma-base0A: #eab700;
  --chroma-base0B: #718c00;
  --chroma-base0C: #3e999f;
  --chroma-base0D: #4271ae;
  --chroma-base0E: #8959a8;
  --chroma-base0F: #a3685a;

  /* shortcodes */
  --callout-info-backgound: #954ce3;
  --callout-info-foreground: rgba(0, 0, 0, .08);
  --callout-info-color: #ffffff;
  --callout-info-anchor: #d2aefc;
  --callout-info-anchor-text-shadow: .4px 0 .8px black;
}

:root[data-color="dark"] {
  --color: rgba(255, 255, 255, 1);
  --color-fade: rgba(255, 255, 255, .5);
  --color-nav: rgba(255, 255, 255, .8);

  --background: #101010;
  --background-grey: #1e1e1e;
  --background-grey-embed: #2f2d2d;

  --foreground: rgba(19, 19, 19, 1);
  --foreground-hover: rgba(35, 35, 35, 1);

  --model-background: rgba(16, 16, 16, 1);
  --model-foreground: rgba(225, 225, 225, .05);
  --model-box-shadow: 0 8px 32px 0 rgba(241, 235, 235, 0.1);

  --border: rgba(225, 225, 225, .1);
  --border-nav: rgba(255, 255, 255, .2);

  --anchor: #2e87f1;
  --hover: #044b9d;

  /* base16 tomorrow night */
  --chroma-base00: var(--background-grey);
  --chroma-base01: #393939;
  --chroma-base02: rgba(159, 218, 159, .1);
  --chroma-base03: #999999;
  --chroma-base04: #b4b7b4;
  --chroma-base05: #cccccc;
  --chroma-base06: #e0e0e0;
  --chroma-base07: #ffffff;
  --chroma-base08: #f2777a;
  --chroma-base09: #f99157;
  --chroma-base0A: #ffcc66;
  --chroma-base0B: #99cc99;
  --chroma-base0C: #66cccc;
  --chroma-base0D: #6699cc;
  --chroma-base0E: #cc99cc;
  --chroma-base0F: #a3685a;
}

.site-logo {
  text-transform: uppercase;
  font-family: var(--font-brand);
  font-size: 1.5em;
  color: transparent;
  -webkit-text-stroke: .5px var(--border);
  background: transparent;
  letter-spacing: 3px;
  background: linear-gradient(45deg, #866ee7, #ea60da, #ed8f57, #fbd41d, #2cca91);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
