:root {
  --code-bg-color: #f1efee;
  --base-color: #68615e;
  --comment-color: #766e6b;
  --keyword-color: #c38418;
  --name-color: #407ee7;
  --number-color: #df5320;
  --string-color: #7b9726;
}

@media (prefers-color-scheme: dark) {
  :root {
    --code-bg-color: #1b1918;
    --base-color: #a8a19f;
  }
}

/* PreWrapper */
.chroma-chroma {
  tab-size: 4;
  color: var(--base-color);
  background-color: var(--code-bg-color);
}

.chroma-chroma code {
  display: block;
  background-color: var(--code-bg-color);
}

/* Line */
.chroma-ln {
  white-space: pre;
  user-select: none;
  margin-right: 12px;
  padding: 8px;
}

.chroma-cl {
  padding: 4px 0 3px 0;
}

/* LineLink */
.chroma-lnlinks,
.chroma-lnlinks:visited {
  text-decoration: none;
  color: var(--text-muted-color);
}

:target {
  font-weight: bolder;
  filter: contrast(10);
}

/* Keyword */
.chroma-k,
/* KeywordConstant */
.chroma-kc,
/* KeywordDeclaration */
.chroma-kd,
/* KeywordNamespace */
.chroma-kn,
/* KeywordPseudo */
.chroma-kp,
/* KeywordReserved */
.chroma-kr,
/* KeywordType */
.chroma-kt
{
  color: var(--keyword-color);
}

/* NameAttribute */
.chroma-na,
/* NameBuiltin */
.chroma-nb,
.chroma-nf,
/* NameTag */
.chroma-nt {
  color: var(--name-color);
}

/* LiteralNumber */
.chroma-m,
/* LiteralNumberBin */
.chroma-mb,
/* LiteralNumberFloat */
.chroma-mf,
/* LiteralNumberHex */
.chroma-mh,
/* LiteralNumberInteger */
.chroma-mi,
/* LiteralNumberIntegerLong */
.chroma-il,
/* LiteralNumberOct */
.chroma-mo
{
  color: var(--number-color);
}

/* LiteralString */
.chroma-s,
/* LiteralStringAffix */
.chroma-sa,
/* LiteralStringBacktick */
.chroma-sb,
/* LiteralStringChar */
.chroma-sc,
/* LiteralStringDelimiter */
.chroma-dl,
/* LiteralStringDoc */
.chroma-sd,
/* LiteralStringDouble */
.chroma-s2,
/* LiteralStringEscape */
.chroma-se,
/* LiteralStringHeredoc */
.chroma-sh,
/* LiteralStringInterpol */
.chroma-si,
/* LiteralStringOther */
.chroma-sx,
/* LiteralStringRegex */
.chroma-sr,
/* LiteralStringSingle */
.chroma-s1,
/* LiteralStringSymbol */
.chroma-ss
{
  color: var(--string-color);
}

/* Comment */
.chroma-c, 
/* CommentHashbang */
.chroma-ch,
/* CommentMultiline */
.chroma-cm,
/* CommentSingle */
.chroma-c1,
/* CommentSpecial */
.chroma-cs,
  /* CommentPreproc */
.chroma-cp,
/* CommentPreprocFile */
.chroma-cpf
{
  color: var(--comment-color);
}

/* GenericHeading */
.chroma-gh,
/* GenericStrong */
.chroma-gs,
/* GenericSubheading */
.chroma-gu,
/* GenericUnderline */
.chroma-gl
{
  color: var(--name-color);
}

.diff-plus {
  background-color: hsla(75, 60%, 37%, 15%);
}

.diff-minus {
  background-color: hsla(354, 88%, 56%, 15%);
}

main.diffs .diff {
  position: relative;
}

main.diffs .diff pre {
  margin-bottom: 24px;
}

main.diffs .diff + .diff::before {
  content: " ";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background-color: var(--code-bg-color);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="none" stroke="%23bdbdbd"><g><path d="m -12,12 c 4,-4 8,-4 12,0 4,4 8,4 12,0 4,-4 8,-4 12,0 4,4 8,4 12,0" /></g></svg>');
}