:root {
  --c_text: light-dark(#000000, #DCDCDC);
  --c_keyword: light-dark(#0000ff, #569CD6);
  --c_builtin: light-dark(#00b0e8, #4EC9B0);
  --c_number: light-dark(#709756, #B8D7A3);
  --c_string: light-dark(#a31515, #D69D85);
  --c_regex: light-dark(#914525, #9A5334);
  --c_function: inherit;
  --c_comment: light-dark(#008000, #57A64A);
  --c_doc: light-dark(#808080, #608B4E);
  --c_tag: light-dark(#7d7d7d, #9B9B9B);
  --c_var: light-dark(#b436bf, #BD63C5);
  --c_attr: light-dark(#ff0000, #9CDCFE);
  --c_section: light-dark(#a31515, #ffd700);
  --c_selector: light-dark(#0000ff, #569CD6);
  --c_addition: light-dark(#a31515, #144212);
  --c_deletion: light-dark(#2b91af, #600);
  --c_caret: light-dark(black, white);
}

.hljs {
  display: block;
  overflow-x: auto;
  color: var(--c_text);
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name,
.hljs-link {
  color: var(--c_keyword);
}

.hljs-link {
  text-decoration: underline;
}

.hljs-built_in,
.hljs-type {
  color: var(--c_builtin);
}

.hljs-number,
.hljs-class {
  color: var(--c_number);
}

.hljs-string,
.hljs-meta-string {
  color: var(--c_string);
}

.hljs-regexp,
.hljs-template-tag {
  color: var(--c_regex);
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: var(--c_function);
}

.hljs-comment,
.hljs-quote {
  color: var(--c_comment);
  font-style: italic
}

.hljs-doctag {
  color: var(--c_doc);
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: var(--c_tag);
}

.hljs-variable,
.hljs-template-variable {
  color: var(--c_var);
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: var(--c_attr);
}

.hljs-section {
  color: var(--c_section);
}

.hljs-emphasis {
  font-style: italic
}

.hljs-strong {
  font-weight: bold
}

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: var(--c_selector);
}

.hljs-addition {
  background-color: var(--c_addition);
  display: inline-block;
  width: 100%
}

.hljs-deletion {
  background-color: var(--c_deletion);
  display: inline-block;
  width: 100%
}