/*
Custom typography (mostly dark mode) styles
*/

@media (prefers-color-scheme:dark){
  .prose,
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6,
  .prose p,
  .prose strong,
  .prose code {
    color:#fff
  }

  .prose pre {
    background-color: rgb(55, 65, 81);
  }
}

.prose a {
  color: rgb(219 39 119);
}

.prose img {
  width: 100%;
}

.prose pre {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.prose pre code {
  width:  100%;
  display: block;
  overflow: auto;
  padding: 0.75rem 1rem 0.75rem 1rem;
}

.prose code button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  bottom: auto;
  left: auto;
}

/*
Latex Styles
*/

.prose .katex-display {
  display: block;
  width: calc(100% + 4rem);
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left:  calc(0rem - 2rem);
  overflow-y: hidden;
  overflow-x: auto;
}

/*
Code Highlighting Theme
(derived from https://github.com/highlightjs/highlight.js/blob/main/src/styles/github-dark.css)
*/

.hljs {
  color: #c9d1d9;
  background: #0d1117;
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #ff7b72;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #d2a8ff;
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  color: #79c0ff;
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  color: #a5d6ff;
}

.hljs-built_in,
.hljs-symbol {
  color: #ffa657;
}

.hljs-comment,
.hljs-code,
.hljs-formula {
  color: #8b949e;
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  color: #7ee787;
}

.hljs-subst {
  color: #c9d1d9;
}

.hljs-section {
  color: #1f6feb;
  font-weight: bold;
}

.hljs-bullet {
  color: #f2cc60;
}

.hljs-emphasis {
  color: #c9d1d9;
  font-style: italic;
}

.hljs-strong {
  color: #c9d1d9;
  font-weight: bold;
}

.hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}

.hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}