/* div.notices { */
/*     margin: 2rem 0; */
/*     position: relative; */
/* } */
/* div.notices p { */
/*     padding: 15px; */
/*     display: block; */
/*     font-size: 1rem; */
/*     margin-top: 0rem; */
/*     margin-bottom: 0rem; */
/*     color: #666; */
/* } */
/* div.notices p:first-child:before { */
/*     position: absolute; */
/*     top: 2px; */
/*     color: #fff; */
/*     font-family: "Font Awesome 5 Free"; */
/*     font-weight: 900; */
/*     content: "\f06a"; */
/*     left: 10px; */
/* } */
/* div.notices p:first-child:after { */
/*     position: absolute; */
/*     top: 2px; */
/*     color: #fff; */
/*     left: 2rem; */
/* } */
/* div.notices.info p { */
/*     border-top: 30px solid #F0B37E; */
/*     background: #FFF2DB; */
/* } */
/* div.notices.info p:first-child:after { */
/*     content: 'Info'; */
/* } */
/* div.notices.warning p { */
/*     border-top: 30px solid rgba(217, 83, 79, 0.8); */
/*     background: #FAE2E2; */
/* } */
/* div.notices.warning p:first-child:after { */
/*     content: 'Warning'; */
/* } */
/* div.notices.note p { */
/*     border-top: 30px solid #6AB0DE; */
/*     background: #E7F2FA; */
/* } */
/* div.notices.note p:first-child:after { */
/*     content: 'Note'; */
/* } */
/* div.notices.tip p { */
/*     border-top: 30px solid rgba(92, 184, 92, 0.8); */
/*     background: #E6F9E6; */
/* } */
/* div.notices.tip p:first-child:after { */
/*     content: 'Tip'; */
/* } */

/* Apply border and shadow only to content images, not icons or other UI elements */
article .post-content img,
article figure img {
  border: 1px solid #e0d5cc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Explicitly exclude footer images from styling */
footer img {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.img-container {
  position: relative;
}

.img-container .glightbox img {
  border: 1px solid #d4c5bc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.85;
  transition: all 0.3s ease;
}

.img-container .glightbox img:hover {
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #c4b5ac;
  transform: translateY(-2px);
}

.img-container .glightbox .caption {
  text-align: center;
  font-size: 0.8em;
  padding: 6px;
}

.glightbox i {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.notice.info {
  border-color: #6bf;
  background-color: rgba(102, 187, 255, 0.1);
}

.notice.warning {
  border-color: #fd6;
  background-color: rgba(255, 221, 102, 0.1);
}

.notice.danger {
  border-color: #f66;
  background-color: rgba(255, 102, 102, 0.1);
}

/* Center captions */
figcaption,
.figure-caption,
.src-block-caption,
.table-caption {
  text-align: center;
  text-indent: 0;
  font-size: small;
  margin-top: 0;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  font-style: italic;
}

/**** TAGS GRID *****/
.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.tag-item a {
  transition: all 0.2s ease;
  color: #433a33;
  text-decoration: none;
}

.tag-item a:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  color: #2c2420;
}

/**** ARCHIVE GRID *****/
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Offset scroll for year headings to account for sticky header */
.post-content h2 {
  scroll-margin-top: 80px;
}

/**** RELATED POSTS *****/
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.related-post-card {
  border: 1px solid #d4c5bc;
  border-radius: 4px;
  padding: 1rem;
  background: #ffffff;
  transition: all 0.2s ease;
}

.related-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(140, 96, 86, 0.15);
  border-color: #c4b5ac;
  background: #ffffff;
}

.related-post-card a {
  text-decoration: none;
  color: #433a33;
}

.related-post-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  color: #433a33;
}

.related-post-date {
  font-size: 0.8rem;
  color: #8c6056;
  opacity: 0.8;
  margin-bottom: 0.75rem;
}

.related-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tag-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: #e8ddd6;
  border-radius: 3px;
  color: #5a4439;
}

.archive-item a {
  transition: all 0.2s ease;
  color: #433a33;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.archive-item a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  border-color: #d0d0d0;
  background-color: #fafafa;
}

.archive-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.archive-date {
  font-size: 0.8rem;
  opacity: 0.6;
  font-weight: 400;
}

/**** LIST GRID (for tag pages, etc) *****/
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.list-item a {
  transition: all 0.2s ease;
  color: #433a33;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.list-item a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  border-color: #d0d0d0;
  background-color: #fafafa;
}

.list-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.list-date {
  font-size: 0.8rem;
  opacity: 0.6;
  font-weight: 400;
}

/**** LINK VISIBILITY IMPROVEMENTS *****/

/* Style sidenote links to match post content */
main .sidenote a,
main .sidenote a:link,
main .sidenote a:visited,
main .sidenote a:any-link,
main small.sidenote a,
main small.sidenote a:link,
main small.sidenote a:visited,
main small.sidenote a:any-link,
span.sidenote-number .sidenote a,
span.sidenote-number .sidenote a:link,
span.sidenote-number .sidenote a:visited,
span.sidenote-number .sidenote a:any-link {
  border-bottom: 1.5px solid #8C6056 !important;
  color: #8C6056 !important;
  text-decoration: none !important;
}

main .sidenote a:hover,
main .sidenote a:active,
main small.sidenote a:hover,
main small.sidenote a:active,
span.sidenote-number .sidenote a:hover,
span.sidenote-number .sidenote a:active {
  border-bottom: 2px solid #6a4840 !important;
  color: #6a4840 !important;
}

/* Style links only on individual post pages (when post-content div exists) */
/* But exclude archive, list and tag page links from this styling */
main.content-width:has(.post-content) a:not(.archive-item a):not(.list-item a):not(.tag-item a):not(.related-post-card a):not(.bg-main-color),
main.content-width:has(.post-content) a:link:not(.archive-item a):not(.list-item a):not(.tag-item a):not(.related-post-card a):not(.bg-main-color),
main.content-width:has(.post-content) a:visited:not(.archive-item a):not(.list-item a):not(.tag-item a):not(.related-post-card a):not(.bg-main-color),
main.content-width:has(.post-content) a:any-link:not(.archive-item a):not(.list-item a):not(.tag-item a):not(.related-post-card a):not(.bg-main-color) {
  border-bottom: 1.5px solid #8C6056 !important;
  color: #8C6056 !important;
  text-decoration: none !important;
}

main.content-width:has(.post-content) a:hover:not(.archive-item a):not(.list-item a):not(.tag-item a):not(.related-post-card a):not(.bg-main-color),
main.content-width:has(.post-content) a:active:not(.archive-item a):not(.list-item a):not(.tag-item a):not(.related-post-card a):not(.bg-main-color) {
  border-bottom: 2px solid #6a4840 !important;
  color: #6a4840 !important;
}

/* Exclude links that have their own specific styling (cards, buttons, etc) */
.related-post-card a,
.archive-item a,
.list-item a,
.tag-item a {
  border-bottom: none !important;
}

/* Archive page links should use heading color like index page - with higher specificity */
main .archive-item a,
main .archive-item a:link,
main .archive-item a:visited,
main .archive-item a:any-link {
  color: var(--heading-text-color) !important;
}

/**** BOLD TEXT IMPROVEMENTS *****/
strong, b {
  font-weight: 700;
  color: #2d2d2d;
  background-color: #f5f0ed;
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

/**** ITALIC TEXT IMPROVEMENTS *****/
em, i {
  font-style: italic;
  background-color: #f9f7f5;
  padding: 0.1em 0.2em;
  border-radius: 2px;
}

/**** INLINE CODE IMPROVEMENTS *****/
p code, li code {
  background-color: #f5f0ed !important;
  padding: 0.1em 0.3em !important;
  border-radius: 2px;
}

/**** BLOCKQUOTE IMPROVEMENTS *****/
blockquote {
  background-color: #f9f7f5 !important;
  border-left: 4px solid var(--secondary-color) !important;
  padding: 1rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  border-radius: 4px;
}

blockquote p {
  color: #4a4a4a !important;
  margin-bottom: 0.5em !important;
}

blockquote p:last-child {
  margin-bottom: 0 !important;
}

/**** HEADING ANCHORS *****/
.heading-anchor {
  opacity: 0;
  margin-left: 0.5rem;
  font-weight: normal;
  text-decoration: none;
  color: #8c6056;
  transition: opacity 0.2s ease;
}

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
h5:hover .heading-anchor,
h6:hover .heading-anchor {
  opacity: 1;
}

.heading-anchor:hover {
  color: #6a4840;
}

/**** SIDENOTES  *****/
/* Expand the content width */
.content-width { max-width: 850px; }

/* * Margin notes/sidenotes */
.sidenote {
  font-family: sans-serif;
  font-size: 80%; /* slightly smaller font for sidenote content */
  font-weight: normal;
  color: var(--theme-hl1-color);
  position: relative; /* forces note to be relative its the normal position */
}
/* Wide viewport */
@media (min-width: 1400px) {
  .sidenote {
    float: left;
    clear: left; /* prevent overlapping of sidenotes */
    text-align: right;

    /* https://kennethfriedman.org/thoughts/2019/marginal-notes/ */
    /* display: inline; */ /* not sure if this is required */
    top: -0.8rem; /* start the sidenote display a bit higher than its reference in body */
    width: 18vw; /* limits the width of the marginal note */
    margin-left: -21vw; /* sets the distance of sidenote's left margin from the HTML element on right */
    margin-top: 1rem; /* keep some space between adjacent sidenotes if they get too close */
    padding: 0.5rem 1rem 0.5rem 0.5rem; /* Add padding for better spacing */
  }
}
/* Narrow viewport */
/* Interleave the "sidenotes" with the body text on narrow screen */
@media (max-width: 1400px) {
  .sidenote {
    /* As the sidenotes are in the body in narrow viewport, they need to
           be floated to the left. */
    float: left;
    text-align: left;

    display: block;
    width: 90%; /* Width is set to 100% so that the sidenote when inlined takes up the entire row. */
    margin: 1rem 0;
    padding-left: 5%; /* Indentation of the sidenotes inside the body. */
  }
}

/* Sidenote counter system */
/* https://codepen.io/dredmorbius/details/OVmBaZ */
.post-content {
  counter-reset: sidenote-counter;
}

.sidenote-number {
  counter-increment: sidenote-counter;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Counter in the main body - superscript number */
.sidenote-number::after {
  content: counter(sidenote-counter);
  vertical-align: super;
  font-family: sans-serif;
  font-size: 0.7em;
  font-weight: bold;
  color: var(--theme-body-color);
  margin-left: 0.1rem;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

/* Highlight the number when hovering over the sidenote container */
.sidenote-number:hover::after {
  background-color: rgba(140, 96, 86, 0.1);
}

/* Counter before the sidenote in the margin */
.sidenote::before {
  content: counter(sidenote-counter) ".";
  font-size: 0.9em;
  font-weight: bold;
  margin-right: 0.3rem;
  color: var(--theme-body-color);
}

/* Hide sidenote content by default - only show the number */
.sidenote-number .sidenote {
  display: none;
}

@media (min-width: 1400px) {
  .sidenote-number .sidenote {
    position: absolute;
    left: -21vw;
    top: -1rem;
    width: 18vw;
    text-align: right;
    margin: 0;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    float: none;
    display: block;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    z-index: 10;
    line-height: 1.4;
    transform: translateY(-50%);
  }

  /* Highlight the sidenote when mouse hovers on the sidenote number in body. */
  .sidenote-number:hover .sidenote {
    background-color: #ffe496 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 1400px) {
  .sidenote-number .sidenote {
    display: none;
  }
}

/* * Code Blocks: pre,.. */
div.highlight {
  /* font-family: var(--mono); */
  overflow-x: auto;
  max-width: 840px; /* Increased to match the wider content width */
  z-index: 1; /* Lowered z-index so it doesn't overlay the navigation */
  transition: margin-right 50ms;
}

/* Clean Modern Pagination */
.pagination-container {
  margin: 3rem 0 2rem 0;
  text-align: center;
}

.pagination-nav {
  display: inline-block;
}

.pagination-links {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-btn,
.pagination-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #e1e5e9;
  border-radius: 3px;
  color: var(--text-color, #333);
  text-decoration: none;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-btn:hover:not(.pagination-disabled),
.pagination-number:hover {
  background: var(--main-color, #8C6056);
  border-color: var(--main-color, #8C6056);
  color: white;
  text-decoration: none;
}

.pagination-number.pagination-current {
  background: var(--main-color, #8C6056);
  border-color: var(--main-color, #8C6056);
  color: white;
  font-weight: 600;
}

.pagination-btn.pagination-disabled {
  background: transparent;
  border-color: #f0f0f0;
  color: #ccc;
  cursor: not-allowed;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  color: #999;
  font-size: 12px;
  font-weight: normal;
}

.pagination-info {
  color: #666;
  font-size: 13px;
  margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .pagination-links {
    gap: 4px;
  }

  .pagination-btn,
  .pagination-number {
    min-width: 26px;
    height: 26px;
    padding: 3px 6px;
    font-size: 11px;
  }

  .pagination-btn {
    padding: 3px 5px;
  }

  .pagination-ellipsis {
    min-width: 26px;
    height: 26px;
  }
}

/* Minimal Post Navigation (prev/next) */
.post-navigation-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.post-nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

.post-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 28px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #e1e5e9;
  border-radius: 3px;
  color: var(--text-color, #333);
  text-decoration: none;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.post-nav-btn:hover {
  background: var(--main-color, #8C6056);
  border-color: var(--main-color, #8C6056);
  color: white;
  text-decoration: none;
}

/* Responsive adjustments for post navigation */
@media (max-width: 600px) {
  .post-navigation-container {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin: 2rem 0 1rem 0;
    text-align: center;
    align-items: center;
  }

  .post-nav-btn {
    min-width: 45px;
    height: 26px;
    padding: 3px 6px;
    font-size: 10px;
  }
}

@media screen and (min-width: 1400px) {
div.highlight:hover {
  /* margin-left: -30vw; */
  /* max-width: 100vw; */
  /* transition: margin-bottom 200ms; */
  }
 pre { white-space: pre; }
}

code {
  /* Make the monospace code blend in better with the rest of the text */
  padding: 0em 0.1em;
}

/* Remove background color if a 'code' text is in a highlighted footnote or a
   table */
.footnotes :target code,
tr code {
  background-color: inherit;
}

/* Differentiate a hyperlinked 'code' text from non-hyperlinked */
a code {
  background-color: inherit; /* No background color for hyperlinked <code> */
}

pre {
  display: block;

  line-height: 1.4;

  /* Below padding-top value is adjusted to match the padding in
       the "[data-lang]::before" rule.
       -> 1 + 0.25 + 0.25 + 0.2(extra) */
  padding-top: 1.7em;
  padding-bottom: 1em;
  padding-left: 0;
  padding-right: 0;

  margin-top: 0;
  margin-bottom: 0.4rem;

  /* border-top: 1px solid var(--theme-color); */
  /* border-bottom: 1px solid var(--theme-color-light); */

  color: #433a33;
  background: #fafafa;
  /* https://www.w3schools.com/cssref/pr_text_white-space.asp */
  /* Preserve whitespace. Wrap text only at line breaks. */
  /* So do NOT auto-wrap the code lines. */

  white-space: pre;
  overflow-x: auto; /* Enable horizontal scroll bars (only for overflowing code) */
}

/* Ensure consistent background color across all code block elements */
.highlight .chroma .lntable {
  /* border-top: 1px solid var(--theme-color); */
  /* border-bottom: 1px solid var(--theme-color-light); */
}
.highlight .chroma .lntable pre {
  border-top: 0px;
  border-bottom: 0px;
}

.chroma table {
  border-collapse: unset;
}

pre code {
  /* line numbers in code blocks */
  display: block;
  padding: 0;
  overflow-x: auto;
}

/* Idea from https://yihui.org/en/2023/08/css-scrollbar/ */
pre:hover, pre code:hover {
  /* line numbers in code blocks */
  white-space: pre-wrap;
}

pre::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: transparent;
  width: 8px;
  height: 8px;
}

pre::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: #d3d2d0;
}

/* Tue Oct 25 09:24:11 EDT 2016 - kmodi */
/* FIXME Below needs to be baked in correctly */
/* https://css-tricks.com/transitions-only-after-page-load/ */
/* .preload * { */
/*     -webkit-transition: none !important; */
/*     -moz-transition: none !important; */
/*     -o-transition: none !important; */
/*     transition: none !important */
/* } */

/* ** Show code block language on top-right/Language Overlay */
/* Thanks to Regis Philibert on the tip for how to make the lang identifier */
/* stay stuck (and not scroll) on top-right. */
/* https://regisphilibert.com/blog/2018/01/hugo-page-resources-and-how-to-use-them/#comment-3711468901 */
pre:not(.chroma), /* Apply to pre blocks where Chroma doesn't recognize the lang identifier */
div.highlight {
  /* .. For lang identifiers recognized by Chroma, apply to the wrapping <div class=highlight ..> block */
  position: relative;
  clear: both; /* Make a code block appear *below* its previous element if that element is set to float. */
}

/* The Hugo generate HTML will get the below language-* class annotation only
   if "pygmentsUseClasses = true" is set in the site config.toml. In addition
   the pygmentize generated CSS file also needs to be generated;
   see static/css/pygmentize.css.
*/
[data-lang]::before {
  color: white;
  background: #8c6056;
  /* When changing the below padding, adjust the padding-top in the "pre" rule */
  padding: 0.25em 0.5em; /* top/bottom left/right */
  position: absolute;
  top: 0px;
  right: 0px;
  /* content: attr(data-lang); */
  /* Above is a short hand for the below explicit content specification,
       though you lose the control on letter casing. */
}

/* https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages */
/* Below, the 'pre' qualifier is needed because we want the lang
   identifier only for code blocks, not inline src blocks. */
pre .language-C::before {
  content: "C";
}
pre .language-D::before {
  content: "D";
}
pre .language-J::before {
  content: "J";
}
pre .language-R::before {
  content: "R";
}
pre .language-abc::before {
  content: "ABC";
}
pre .language-ada::before {
  content: "Ada";
}
pre .language-ash::before {
  content: "ash";
}
pre .language-asm::before {
  content: "Assembler";
}
pre .language-asymptote::before {
  content: "Asymptote";
}
pre .language-awk::before {
  content: "Awk";
}
pre .language-bash::before {
  content: "bash";
}
pre .language-calc::before {
  content: "Emacs Calc";
}
pre .language-caml::before {
  content: "Caml";
}
pre .language-clojure::before {
  content: "Clojure";
}
pre .language-cfg::before {
  content: "Conf";
}
pre .language-coq::before {
  content: "Coq";
}
pre .language-cpp::before {
  content: "C++";
}
pre .language-csh::before {
  content: "csh";
}
pre .language-css::before {
  content: "CSS";
}
pre .language-dash::before {
  content: "dash";
}
pre .language-delphi::before {
  content: "Delphi";
}
pre .language-ditaa::before {
  content: "ditaa";
}
pre .language-docker::before {
  content: "Docker";
}
pre .language-dot::before {
  content: "Graphviz";
}
pre .language-ebnf2ps::before {
  content: "ebfn2ps";
}
pre .language-el::before {
  content: "Emacs Lisp";
}
pre .language-elisp::before {
  content: "Emacs Lisp";
}
pre .language-emacs-lisp::before {
  content: "Emacs Lisp";
}
pre .language-emacs::before {
  content: "Emacs Lisp";
}
pre .language-forth::before {
  content: "Forth";
}
pre .language-fortran::before {
  content: "Fortran";
}
pre .language-gnuplot::before {
  content: "gnuplot";
}
pre .language-go::before {
  content: "Go";
}
pre .language-go-html-template::before {
  content: "Go Template";
}
pre .language-go-text-template::before {
  content: "Go Template";
}
pre .language-groovy::before {
  content: "Groovy";
}
pre .language-haskell::before {
  content: "Haskell";
}
pre .language-hledger::before {
  content: "hledger";
}
pre .language-html::before {
  content: "HTML";
}
pre .language-http::before {
  content: "HTTP";
}
pre .language-idl::before {
  content: "IDL";
}
pre .language-io::before {
  content: "IO";
}
pre .language-java::before {
  content: "Java";
}
pre .language-js::before {
  content: "Javascript";
}
pre .language-json::before {
  content: "JSON";
}
pre .language-ksh::before {
  content: "ksh";
}
pre .language-latex::before {
  content: "LaTeX";
}
pre .language-ledger::before {
  content: "Ledger";
}
pre .language-lilypond::before {
  content: "Lilypond";
}
pre .language-lisp::before {
  content: "Lisp";
}
pre .language-lua::before {
  content: "Lua";
}
pre .language-makefile::before {
  content: "Makefile";
}
pre .language-markdown::before {
  content: "Markdown";
}
pre .language-matlab::before {
  content: "MATLAB";
}
pre .language-maxima::before {
  content: "Maxima";
}
pre .language-md::before {
  content: "Markdown";
}
pre .language-mercury::before {
  content: "Mercury";
}
pre .language-metapost::before {
  content: "MetaPost";
}
pre .language-mksh::before {
  content: "mksh";
}
pre .language-modula-2::before {
  content: "Modula-2";
}
pre .language-mscgen::before {
  content: "Mscgen";
}
pre .language-nxml::before {
  content: "XML";
}
pre .language-nim::before {
  content: "Nim";
}
pre .language-ocaml::before {
  content: "Objective Caml";
}
pre .language-octave::before {
  content: "Octave";
}
pre .language-org::before {
  content: "Org";
}
pre .language-oz::before {
  content: "OZ";
}
pre .language-pascal::before {
  content: "Pascal";
}
pre .language-perl::before {
  content: "Perl";
}
pre .language-picolisp::before {
  content: "Pico Lisp";
}
pre .language-plain-tex::before {
  content: "Plain TeX";
}
pre .language-plantuml::before {
  content: "PlantUML";
}
pre .language-posh::before {
  content: "posh";
}
pre .language-processing::before {
  content: "Processing.js";
}
pre .language-prolog::before {
  content: "Prolog";
}
pre .language-ps::before {
  content: "PostScript";
}
pre .language-python::before {
  content: "Python";
}
pre .language-ruby::before {
  content: "Ruby";
}
pre .language-sass::before {
  content: "Sass";
}
pre .language-scala::before {
  content: "Scala";
}
pre .language-scheme::before {
  content: "Scheme";
}
pre .language-screen::before {
  content: "Gnu Screen";
}
pre .language-sed::before {
  content: "Sed";
}
pre .language-sh::before {
  content: "bash";
}
pre .language-shell::before {
  content: "Shell";
}
pre .language-simula::before {
  content: "Simula";
}
pre .language-sql::before {
  content: "SQL";
}
pre .language-sqlite::before {
  content: "SQLite";
}
pre .language-sv::before {
  content: "SystemVerilog";
}
pre .language-systemverilog::before {
  content: "SystemVerilog";
}
pre .language-tcl::before {
  content: "tcl";
}
pre .language-tcsh::before {
  content: "tcsh";
}
pre .language-tex::before {
  content: "TeX";
}
pre .language-terraform::before {
  content: "Terraform";
}
pre .language-toml::before {
  content: "TOML";
}
pre .language-verilog::before {
  content: "Verilog";
}
pre .language-vhdl::before {
  content: "VHDL";
}
pre .language-xml::before {
  content: "XML";
}
pre .language-yaml::before {
  content: "YAML";
}