.highlight {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #383a42;
  background: #fafafa;
}

.highlight .comment,
.highlight .quote {
  color: #a0a1a7;
  font-style: italic;
}

.highlight .doctag,
.highlight .formula,
.highlight .keyword {
  color: #a626a4;
}

.highlight .deletion,
.highlight .name,
.highlight .section,
.highlight .selector-tag,
.highlight .subst {
  color: #e45649;
}

.highlight .literal {
  color: #0184bb;
}

.highlight .addition,
.highlight .attribute,
.highlight .meta-string,
.highlight .regexp,
.highlight .string {
  color: #50a14f;
}

.highlight .built_in,
.highlight .class .highlight .title {
  color: #c18401;
}

.highlight .attr,
.highlight .number,
.highlight .selector-attr,
.highlight .selector-class,
.highlight .selector-pseudo,
.highlight .template-variable,
.highlight .type,
.highlight .variable {
  color: #986801;
}

.highlight .bullet,
.highlight .link,
.highlight .meta,
.highlight .selector-id,
.highlight .symbol,
.highlight .title {
  color: #4078f2;
}

.highlight .emphasis {
  font-style: italic;
}

.highlight .strong {
  font-weight: 700;
}

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

@media (prefers-color-scheme: dark) {
  .highlight {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #abb2bf;
    background: #282c34;
  }
  .highlight .comment,
  .highlight .quote {
    color: #5c6370;
    font-style: italic;
  }
  .highlight .doctag,
  .highlight .formula,
  .highlight .keyword {
    color: #c678dd;
  }
  .highlight .deletion,
  .highlight .name,
  .highlight .section,
  .highlight .selector-tag,
  .highlight .subst {
    color: #e06c75;
  }
  .highlight .literal {
    color: #56b6c2;
  }
  .highlight .addition,
  .highlight .attribute,
  .highlight .meta-string,
  .highlight .regexp,
  .highlight .string {
    color: #98c379;
  }
  .highlight .built_in,
  .highlight .class .highlight .title {
    color: #e6c07b;
  }
  .highlight .attr,
  .highlight .number,
  .highlight .selector-attr,
  .highlight .selector-class,
  .highlight .selector-pseudo,
  .highlight .template-variable,
  .highlight .type,
  .highlight .variable {
    color: #d19a66;
  }
  .highlight .bullet,
  .highlight .link,
  .highlight .meta,
  .highlight .selector-id,
  .highlight .symbol,
  .highlight .title {
    color: #61aeee;
  }
  .highlight .emphasis {
    font-style: italic;
  }
  .highlight .strong {
    font-weight: 700;
  }
  .highlight .link {
    text-decoration: underline;
  }
}