:root {
  --bg: #1e1e1e;
  --fg: #dcdcdc;
  --keyword: #c586c0;
  --string: #ce9178;
  --number: #b5cea8;
  --function: #dcdcaa;
  --comment: #6a9955;
  --type: #4ec9b0;
  --operator: #d4d4d4;
  --builtin: #569cd6;
}

code span.kw { color: var(--keyword); }        /* Keyword */
code span.dt { color: var(--type); }           /* DataType */
code span.dv,
code span.bn,
code span.fl { color: var(--number); }         /* Numbers */
code span.ch,
code span.st { color: var(--string); }         /* Strings */
code span.co { color: var(--comment); font-style: italic; } /* Comments */
code span.fu { color: var(--function); }       /* Function names */
code span.op { color: var(--operator); }       /* Operators */
code span.bu { color: var(--builtin); }        /* Builtins */
code span.va { color: var(--fg); }             /* Variables */
code span.al { color: #d16969; }               /* Alerts / Errors */
code span.cn { color: var(--number); }         /* Constants */
code span.at { color: var(--builtin); }        /* Attributes */
code span.pp { color: var(--keyword); }        /* Preprocessor */
code span.ss { color: var(--string); }         /* Special String */