app/components/prism.css
code[class*="language-"], pre[class*="language-"] {
  color: var(--text-color-1);
  font-family: 'Dank Mono', 'Operator Mono', 'Inconsolata', 'Fira Mono', 'SF Mono', 'Monaco', 'Droid Sans Mono', 'Source Code Pro', monospace;
  display: inline-block;

  --fluid-type-min-size: .5;
  --fluid-type-max-size: 1;
  --fluid-type-min-screen: 20;
  --fluid-type-max-screen: 88;

  font-size: calc(
    (var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) * (100vw - (var(--fluid-type-min-screen) * 1rem)) /
      (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
  );
}

.line-numbers .line-numbers-rows {
  border-right: 1px solid hsl(0, 0%, 20%);
  width: 2.5em;
}

.token {
  &:is(.property, .keyword, .tag, .function) {
    color: var(--brand-color-1);
  }

  &:is(.selector, .attr-name, .string, .operator, .char, .builtin, .inserted) {
    color: var(--brand-color-2);
  }

  &:is(.parameter, .punctuation) {
    color: var(--brand-color-3);
  }

  &:is(.attr-value) {
    color: var(--text-color-1);
  }

  /* &:is(.property, .tag, .function, .comment) {
    font-style: italic;
  } */
}

.line-numbers-rows > span:before {
  color: var(--text-color-3);
}