/** 
TODO: Modify the Code section font, space issue.
*/
:root {
  --font-firacode-regular: 'FiraCode', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

@font-face {
  font-family: 'FiraCode';
  src: url('/assets/atstudio/fonts/FiraCode-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

code {
  font-family: var(--font-firacode-regular);
  line-height: var(--lh-150);
  letter-spacing: var(--zero);
  color: var(--font);
  background: var(--bg);
  font-size: 90%;
  padding-inline: .25em;
  border-radius: .25em;
}

code[class*=language-],
pre[class*=language-] {
  overflow: auto;
  color: var(--bg);
  background-color: var(--font);
  font-family: var(--font-firacode-regular);
  font-size: var(--fs-20-16);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: var(--lh-150);
  letter-spacing: var(--zero);
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none
}

pre[class*=language-] {
  padding: var(--sp-16);
}

.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: #999
}

.token.punctuation {
  color: #ccc
}

.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag {
  color: #e2777a
}

.token.function-name {
  color: #6196cc
}

.token.boolean,
.token.function,
.token.number {
  color: #f08d49
}

.token.class-name,
.token.constant,
.token.property,
.token.symbol {
  color: #f8c555
}

.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
  color: #cc99cd
}

.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
  color: #7ec699
}

.token.entity,
.token.operator,
.token.url {
  color: #67cdcc
}

.token.bold,
.token.important {
  font-weight: 700
}

.token.italic {
  font-style: italic
}

.token.entity {
  cursor: help
}

.token.inserted {
  color: green
}