div.filename {
  background-color: #292929;
}

pre[class*="language-"] {
  background-color: #151515;
}

.filename {
  border-radius: 0.3em;
}

.ribbon {
  margin-top: 0.33em;
  float: right;
  height: 20px;
  width: 52px;
  background: 0 0 no-repeat;
  background-size: 52px 20px;
}

.filename > span {
  font-family: Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier,
    monospace;
  font-size: 0.8em;
  color: lightgrey;
  display: block;
  padding: 5px 0 0 10px;
}

.filename.javascript .ribbon,
.filename.js .ribbon {
  background-image: url("/images/ribbon-js.svg");
}

.filename.html .ribbon {
  background-image: url("/images/ribbon-html.svg");
}

.filename.handlebars .ribbon,
.filename.hbs .ribbon {
  background-image: url("/images/ribbon-hbs.svg");
}

code {
  font-feature-settings: "kern", "tnum";
}

pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;
}

.line-numbers-rows > a {
  display: block;
  counter-increment: linenumber;
  background: none !important;
  text-decoration: none !important;
}

.line-numbers-rows > a::before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

.line-numbers-rows > a:hover::before,
.line-numbers-rows > a:focus::before {
  color: #fff;
}

.token.regex,
.token.important,
.token.variable {
  color: #c3f590;
}

code > .token.property,
code > .token.tag,
code > .token.constant,
code > .token.symbol,
code > .token.deleted {
  color: #ff6fa3;
}

code > .diff-insertion {
  background-color: rgb(93 125 93 / 50%);

  .token.property,
  .token.tag,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: #ff95bb;
  }
}

code > .diff-deletion {
  background-color: rgb(144 84 84 / 70%);

  .token.property,
  .token.tag,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: #ffaac8;
  }
}

/* don't include "removed" code when copy-pasting diffs */
code .diff-operator,
code .diff-deletion {
  user-select: none;
}

code .token.comment {
  color: #e6e6e6;
}