@import url('//fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* highlight */
:root {
  --highlight-comment-color: #8e908c;
  --highlight-red-color: #e71818;
  --highlight-orange-color: #e67c19;
  --highlight-yellow-color: #d1a505;
  --highlight-green-color: #8fb300;
  --highlight-aqua-color: #40b7bf;
  --highlight-blue-color: #528fe0;
  --highlight-purple-color: #ab5fdd;
  --highlight-stack: 'Roboto Mono', 'Inconsolata', 'Consolas', monospace;
}

code {
  font-family: var(--highlight-stack);
}

.highlight td,
.highlight th,
.highlight table caption,
.highlight table td,
.highlight table th {
  border: none;
  padding: 0;
}

pre {
  background-color: var(--code-bg-color);
  box-sizing: border-box;
  font-size: 0.8em;
  font-family: var(--highlight-stack);
  margin: 0;
  overflow-x: auto;
  padding: 0.5em;
}

pre::-webkit-scrollbar-track {
  background-color: var(--code-bg-color);
}

pre::-webkit-scrollbar {
  height: 0.5em;
  background-color: var(--code-bg-color);
}

pre::-webkit-scrollbar-thumb {
  background-color: var(--tertiary-color);
}

.highlight {
  margin: 1em 0;
  width: 100%;
}

.highlight .gutter pre {
  background-color: var(--bg-color);
  color: var(--secondary-color);
  padding: 0 0.5em 0 0;
  text-align: right;
}

.highlight table,
.highlight .gutter pre {
  overflow-x: hidden;
  width: 2em;
}

.highlight .code pre {
  max-width: 30rem;
  width: calc(100vw - 4rem);
}

pre .comment,
pre .title {
  color: var(--highlight-comment-color);
}

pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: var(--highlight-red-color);
}

pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: var(--highlight-orange-color);
}

pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: var(--highlight-green-color);
}

pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: var(--highlight-green-color);
}

pre .css .hexcolor {
  color: var(--highlight-aqua-color);
}

pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: var(--highlight-blue-color);
}

pre .keyword,
pre .javascript .function {
  color: var(--highlight-purple-color);
}

.highlight .gutter {
  position: relative;
  top: -0.2em;
}

@media all and (min-width: 620px) {
  .highlight .gutter,
  .highlight .code {
    left: -2em;
    position: relative;
  }

  .highlight .code pre {
    max-width: 37.5em;
  }

  .article-entry {
    overflow: visible;
  }
}