pre {
  margin: var(--grid) 0;
  border-radius: var(--radius);
}

pre::before {
  content: "```" attr(class) "\A";
}

pre::after {
  z-index: -1;
  position: relative;
  top: -1em;
  content: "\A```";
}

pre > code {
  font-family: var(--code-font);
  overflow: auto;
  display: block;
  padding: 0.5rem;
  margin: 0;
}

pre > code::before,
pre > code::after {
  content: none;
}

.hljs-keyword {
  color: #a71d5d;
}

.hljs-title {
  color: #795da3;
}

.hljs-string {
  color: #183691;
}

.hljs-number {
  color: #0086b3;
}

.hljs-built_in {
  color: #0086b3;
}

.hljs-literal {
  color: #0086b3;
}

.hljs-regexp {
  color: #183691;
}

.hljs-comment {
  color: #4f80e5;
}

.hljs-tag {
  color: #a71d5d;
}

.hljs-name {
  color: #222222;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-attribute {
  font-weight: bold;
}

.hljs-meta {
  color: #4f80e5;
}

.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-pseudo {
  color: #6f42c1;
}

.hljs-selector-tag {
  color: #22863a;
}

.hljs-subst {
  font-weight: bold;
}

.hljs-variable {
  color: #a71d5d;
}

.hljs-symbol {
  font-weight: bold;
}

.hljs-selector-attr {
  color: #6f42c1;
}

.hljs-bullet {
}


@media (prefers-color-scheme: dark) {
  .hljs-keyword {
    color: #000;
    font-weight: bold;
    font-style: italic;
  }

  .hljs-number {
    color: var(--code-block-font);
  }

  .hljs-built_in {
    color: #000;
    font-weight: bold;
  }

  .hljs-literal {
    color: var(--code-block-font);
    font-weight: bold;
  }

  .hljs-regexp {
    color: var(--code-block-font);
  }

  .hljs-comment {
    color: #888;
  }

  .hljs-tag {
    color: var(--code-block-font);
    font-weight: bold;
  }

  .hljs-strong {
    font-weight: bold;
  }

  .hljs-attribute {
  }

  .hljs-attr {
    color: var(--code-block-font);
    font-weight: bold;
  }

  .hljs-selector-tag {
    color: var(--code-block-font);
  }

  .hljs-subst {
    font-weight: bold;
  }
  .hljs-symbol {
    font-weight: bold;
  }

  .hljs-section {
  }

  .hljs-meta,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-selector-pseudo,
  .hljs-variable,
  .hljs-title,
  .hljs-string,
  .hljs-name,
  .hljs-selector-attr {
    color: var(--code-block-font);
  }
}







/**.hljs,**/
.hljs-meta-keyword,
.hljs-doctag,
.hljs-code,
.hljs-addition,
.hljs-template-variable,
.hljs-link,
.hljs-type,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-meta-string,
.hljs-emphasis {
  /** if you find element applyed this style, please tell me https://github.com/jxck/jxck.io/issues **/
  font-size: 100em;
}