code,
pre {
  font-family: Consolas, Menlo, Monaco, source-code-pro, monospace;
  hyphens: none;
  line-height: 1.5;
  overflow: auto;
  tab-size: 2;
  text-align: left;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}

pre {
  background: #282c34;
  border-radius: .25rem;
  color: white;
  margin: 0;
  overflow: auto;
  padding: 1rem;
}

code {
  font-size: .875rem;
}

:not(pre)>code {
  background: rgba(0, 0, 0, .06);
  border-radius: .125rem;
  color: #1a1a1a;
  padding: .125rem .25rem .0625rem;
  white-space: normal;
}

.highlight,
pre.highlight {
  border-radius: .25rem;
  max-width: 50rem;
  margin: 3rem auto;
}

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

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

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

.highlight .n,
.highlight .nf,
.highlight .nn,
.highlight .o,
.highlight .p {
  color: #abb2bf;
}

.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs {
  color: #969696;
  font-style: italic;
}

.highlight .sr,
.highlight .ss {
  color: #56b6c2;
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #dc64ff;
}

.highlight .l,
.highlight .ld,
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx {
  color: #8bdb51;
}

.highlight .nt,
.highlight .nx,
.highlight .vi {
  color: #fb6666;
}

.highlight .il,
.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .na {
  color: #e8e465;
}

.highlight .bp,
.highlight .nb,
.highlight .nc,
.highlight .nd,
.highlight .ne,
.highlight .ni,
.highlight .nl,
.highlight .no,
.highlight .nv,
.highlight .py,
.highlight .vc,
.highlight .vg {
  color: #e5c07b;
}

.highlight .gd {
  color: #e05252;
}

.highlight .gi {
  color: #43d08a;
}

.highlight .w {
  color: #f8f8f2;
}

.highlight .cpf {
  color: navy;
}

.highlight .gu {
  color: #75715e;
}

.highlight .lineno {
  color: #636d83;
  user-select: none;
}

.highlight .ln {
  color: #636d83;
  user-select: none;
}

.highlight .ln:after {
  content: " ";
}

.highlight .hll,
.highlight .hl {
  color: #abb2bf;
  background-color: #3a3f4b;
  display: block;
}

.highlight .language-json .w+.s2 {
  color: #e06c75;
}

.highlight .language-json .kc {
  color: #56b6c2;
}

.highlight {
  position: relative;
}

.highlight .language-typescript::before {
  background: url(/images/tags/typescript.svg);
  width: 2rem;
  height: 2rem;
  background-size: cover;
  content: '';
  border-radius: 0;
  top: -0.75rem;
}

.highlight .language-css::before {
  background: url(/images/tags/css.svg);
  width: 2rem;
  height: 2rem;
  background-size: cover;
  content: '';
  border-radius: 0;
  top: -0.75rem;
}

.highlight .language-html::before {
  background: url(/images/tags/html.svg);
  width: 2rem;
  height: 2rem;
  background-size: cover;
  content: '';
  border-radius: 0;
  top: -0.75rem;
}

.highlight .language-javascript::before {
  background: url(/images/tags/javascript.svg);
  width: 2rem;
  height: 2rem;
  background-size: cover;
  content: '';
  border-radius: 0;
  top: -0.75rem;
}

.highlight .language-sh::before {
  background: url(/images/tags/terminal.svg);
  width: 2rem;
  height: 2rem;
  background-size: cover;
  content: '';
  border-radius: 0;
  top: -0.75rem;
}

.highlight .language-svelte::before {
  background: url(/images/tags/svelte.svg);
  width: 2rem;
  height: 2rem;
  background-size: cover;
  content: '';
  border-radius: 0;
  top: -0.75rem;
}

.highlight .language-jsx::before {
  background: url(/images/tags/react.svg);
  width: 2.25rem;
  height: 2rem;
  background-size: cover;
  content: '';
  border-radius: 0;
  top: .375rem;
}

.highlight .language-fallback::before {
  display: none;
}

.highlight code::before {
  background: #fff;
  border-radius: .25rem;
  color: rgba(0, 0, 0, .7);
  content: attr(data-lang);
  font-size: .75rem;
  padding: .125rem .5rem;
  position: absolute;
  right: .5rem;
  text-transform: lowercase;
  top: -0.5rem;
}

.highlight .lntable {
  border-spacing: 0rem;
  width: 100%;
}