.about-icons .icon-x::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: url("../img/x.svg") center / contain no-repeat;
  mask: url("../img/x.svg") center / contain no-repeat;
}

:root {
  --code-muted-color: #57606a;
  --code-builtin-color: #953800;
  --code-keyword-color: #cf222e;
}

[data-user-color-scheme="dark"] {
  --code-muted-color: #8b949e;
  --code-builtin-color: #ffa657;
  --code-keyword-color: #ff7b72;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) {
    --code-muted-color: #8b949e;
    --code-builtin-color: #ffa657;
    --code-keyword-color: #ff7b72;
  }
}

/* Include bare and quoted code blocks, not just highlighted figures. */
.markdown-body pre,
.markdown-body .highlight pre,
.markdown-body pre code.hljs {
  color: var(--post-text-color);
  background-color: var(--highlight-bg-color);
  transition: none;
}

.markdown-body figure.highlight td.gutter {
  transition: none;
}

/* The stock light theme's orange is too faint at code font sizes. */
.markdown-body .hljs-built_in,
.markdown-body .hljs-symbol {
  color: var(--code-builtin-color);
}

.markdown-body .hljs-doctag,
.markdown-body .hljs-keyword,
.markdown-body .hljs-template-tag,
.markdown-body .hljs-template-variable,
.markdown-body .hljs-type,
.markdown-body .hljs-variable.language_ {
  color: var(--code-keyword-color);
}

.markdown-body figure.highlight td.gutter pre span.line,
.markdown-body .hljs-comment,
.markdown-body .hljs-quote,
.markdown-body .code-widget {
  color: var(--code-muted-color);
}

.markdown-body .copy-btn:focus-visible {
  outline: 2px solid var(--post-link-color);
  outline-offset: 2px;
  border-radius: 2px;
}

.markdown-body .copy-btn:focus-visible > i {
  opacity: 0.9;
}