code[class*="language-"] {
  display: block;
  width: 0;
}

code[class*="language-"],
pre[class*="language-"] {
  background: light-dark(#fafafa, #1d1f21);
  color: light-dark(#90a4ae, #c5c8c6);
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  font-size: 1em;
  line-height: 1.5em;
  tab-size: 4;
  hyphens: none;
}

code[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection,
pre[class*="language-"] ::-moz-selection {
  background: light-dark(#cceae7, rgba(255, 255, 255, 0.1));
  color: light-dark(#263238, #c5c8c6);
}

code[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"] ::selection,
pre[class*="language-"] ::selection {
  background: light-dark(#cceae7, rgba(255, 255, 255, 0.1));
  color: light-dark(#263238, #c5c8c6);
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1.25em 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
  position: relative;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: light-dark(0.2em, 0.3em);
  white-space: light-dark(normal, pre);
}

.language-css > code,
.language-sass > code,
.language-scss > code {
  color: light-dark(#f76d47, #87c38a);
}

[class*="language-"] .namespace,
.namespace {
  opacity: 0.7;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: light-dark(#aabfc9, #7c7c7c);
}

.token.punctuation {
  color: light-dark(#39adb5, #c5c8c6);
}

.token.property,
.token.keyword,
.token.tag {
  color: light-dark(#7c4dff, #96cbfe);
}

.token.class-name {
  color: light-dark(#6182b8, #ffffb6);
  text-decoration: light-dark(none, underline);
}

.token.boolean,
.token.constant {
  color: light-dark(#7c4dff, #99cc99);
}

.token.symbol,
.token.deleted {
  color: light-dark(#e53935, #f92672);
}

.token.number {
  color: light-dark(#f76d47, #ff73fd);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: light-dark(#f6a434, #a8ff60);
}

.token.variable {
  color: light-dark(#e53935, #c6c5fe);
}

.token.operator {
  color: light-dark(#39adb5, #ededed);
}

.token.entity {
  color: light-dark(#e53935, #ffffb6);
  cursor: help;
}

.token.url {
  color: light-dark(#e53935, #96cbfe);
}

.token.atrule,
.token.attr-value {
  color: light-dark(#f6a434, #f9ee98);
}

.token.function {
  color: light-dark(#7c4dff, #dad085);
}

.token.regex {
  color: light-dark(#6182b8, #e9c062);
}

.token.important {
  color: light-dark(#7c4dff, #fd971f);
  font-weight: bold;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.attribute {
  color: light-dark(#f6a434, #a8ff60);
}

.token.class {
  color: light-dark(#39adb5, #a8ff60);
}

.token.hexcode {
  color: light-dark(#f76d47, #ff73fd);
}

.token.id {
  color: light-dark(#7c4dff, #96cbfe);
  font-weight: bold;
}

.token.pseudo-class,
.token.pseudo-element {
  color: light-dark(#f6a434, #f9ee98);
}

.token.unit {
  color: light-dark(#f76d47, #ff73fd);
}