.theme-blue {
  --red1: hsl(359 100% 99.4%);
  --red2: hsl(359 100% 98.6%);
  --red3: hsl(360 100% 96.8%);
  --red4: hsl(360 97.9% 94.8%);
  --red5: hsl(360 90.2% 91.9%);
  --red6: hsl(360 81.7% 87.8%);
  --red7: hsl(359 74.2% 81.7%);
  --red8: hsl(359 69.5% 74.3%);
  --red9: hsl(358 75% 59%);
  --red10: hsl(358 69.4% 55.2%);
  --red11: hsl(358 65% 48.7%);
  --red12: hsl(354 50% 14.6%);

  --crimson1: hsl(332 100% 99.4%);
  --crimson2: hsl(330 100% 98.4%);
  --crimson3: hsl(331 85.6% 96.6%);
  --crimson4: hsl(331 78.1% 94.2%);
  --crimson5: hsl(332 72.1% 91.1%);
  --crimson6: hsl(333 67% 86.7%);
  --crimson7: hsl(335 63.5% 80.4%);
  --crimson8: hsl(336 62.3% 72.9%);
  --crimson9: hsl(336 80% 57.8%);
  --crimson10: hsl(336 73.7% 53.5%);
  --crimson11: hsl(336 75% 47.2%);
  --crimson12: hsl(340 65% 14.5%);

  --pink1: hsl(322 100% 99.4%);
  --pink2: hsl(323 100% 98.4%);
  --pink3: hsl(323 86.3% 96.5%);
  --pink4: hsl(323 78.7% 94.2%);
  --pink5: hsl(323 72.2% 91.1%);
  --pink6: hsl(323 66.3% 86.6%);
  --pink7: hsl(323 62% 80.1%);
  --pink8: hsl(323 60.3% 72.4%);
  --pink9: hsl(322 65% 54.5%);
  --pink10: hsl(322 63.9% 50.7%);
  --pink11: hsl(322 75% 46%);
  --pink12: hsl(320 70% 13.5%);

  --purple1: hsl(280 65% 99.4%);
  --purple2: hsl(276 100% 99%);
  --purple3: hsl(276 83.1% 97%);
  --purple4: hsl(275 76.4% 94.7%);
  --purple5: hsl(275 70.8% 91.8%);
  --purple6: hsl(274 65.4% 87.8%);
  --purple7: hsl(273 61% 81.7%);
  --purple8: hsl(272 60% 73.5%);
  --purple9: hsl(272 51% 54%);
  --purple10: hsl(272 46.8% 50.3%);
  --purple11: hsl(272 50% 45.8%);
  --purple12: hsl(272 66% 16%);

  --indigo1: hsl(225 60% 99.4%);
  --indigo2: hsl(223 100% 98.6%);
  --indigo3: hsl(223 98.4% 97.1%);
  --indigo4: hsl(223 92.9% 95%);
  --indigo5: hsl(224 87.1% 92%);
  --indigo6: hsl(224 81.9% 87.8%);
  --indigo7: hsl(225 77.4% 82.1%);
  --indigo8: hsl(226 75.4% 74.5%);
  --indigo9: hsl(226 70% 55.5%);
  --indigo10: hsl(226 58.6% 51.3%);
  --indigo11: hsl(226 55% 45%);
  --indigo12: hsl(226 62% 17%);

    --blue1: #fbfdff;
    --blue2: #f4faff;
    --blue3: #e6f4fe;
    --blue4: #d5efff;
    --blue5: #c2e5ff;
    --blue6: #acd8fc;
    --blue7: #8ec8f6;
    --blue8: #5eb1ef;
    --blue9: #0090ff;
    --blue10: #0588f0;
    --blue11: #0d74ce;
    --blue12: #113264;


  --cyan1: hsl(185 60% 98.7%);
  --cyan2: hsl(185 73.3% 97.1%);
  --cyan3: hsl(186 70.2% 94.4%);
  --cyan4: hsl(186 63.8% 90.6%);
  --cyan5: hsl(187 58.3% 85.4%);
  --cyan6: hsl(188 54.6% 78.4%);
  --cyan7: hsl(189 53.7% 68.7%);
  --cyan8: hsl(189 60.3% 52.5%);
  --cyan9: hsl(190 95% 39%);
  --cyan10: hsl(191 91.2% 36.8%);
  --cyan11: hsl(192 85% 31%);
  --cyan12: hsl(192 88% 12.5%);

  --teal1: hsl(165 60% 98.8%);
  --teal2: hsl(169 64.7% 96.7%);
  --teal3: hsl(169 59.8% 94%);
  --teal4: hsl(169 53.1% 90.2%);
  --teal5: hsl(170 47.1% 85%);
  --teal6: hsl(170 42.6% 77.9%);
  --teal7: hsl(170 39.9% 68.1%);
  --teal8: hsl(172 42.1% 52.5%);
  --teal9: hsl(173 80% 36%);
  --teal10: hsl(173 83.4% 32.5%);
  --teal11: hsl(174 90% 25.2%);
  --teal12: hsl(170 50% 12.5%);

  --brown1: hsl(30 40% 99.1%);
  --brown2: hsl(30 50% 97.6%);
  --brown3: hsl(30 52.5% 94.6%);
  --brown4: hsl(30 53% 91.2%);
  --brown5: hsl(29 52.9% 86.8%);
  --brown6: hsl(29 52.5% 80.9%);
  --brown7: hsl(29 51.5% 72.8%);
  --brown8: hsl(28 50% 63.1%);
  --brown9: hsl(28 34% 51%);
  --brown10: hsl(27 31.8% 47.6%);
  --brown11: hsl(25 30% 41%);
  --brown12: hsl(20 30% 19%);

  --sky1: hsl(193 100% 98.8%);
  --sky2: hsl(193 100% 97.3%);
  --sky3: hsl(193 99% 94.7%);
  --sky4: hsl(193 91.4% 91.4%);
  --sky5: hsl(194 82% 86.6%);
  --sky6: hsl(194 74.1% 79.5%);
  --sky7: hsl(194 72.3% 69.6%);
  --sky8: hsl(193 77.9% 53.9%);
  --sky9: hsl(193 98% 70%);
  --sky10: hsl(193 87% 66.5%);
  --sky11: hsl(195 100% 31.5%);
  --sky12: hsl(195 100% 13%);

  --amber1: hsl(39 70% 99%);
  --amber2: hsl(40 100% 96.5%);
  --amber3: hsl(44 100% 91.7%);
  --amber4: hsl(43 100% 86.8%);
  --amber5: hsl(42 100% 81.8%);
  --amber6: hsl(38 99.7% 76.3%);
  --amber7: hsl(36 86.1% 67.1%);
  --amber8: hsl(35 85.2% 55.1%);
  --amber9: hsl(39 100% 57%);
  --amber10: hsl(35 100% 55.5%);
  --amber11: hsl(30 100% 34%);
  --amber12: hsl(20 80% 17%);

  --gray1: hsl(0 0% 99%);
  --gray2: hsl(0 0% 97.3%);
  --gray3: hsl(0 0% 95.1%);
  --gray4: hsl(0 0% 93%);
  --gray5: hsl(0 0% 90.9%);
  --gray6: hsl(0 0% 88.7%);
  --gray7: hsl(0 0% 85.8%);
  --gray8: hsl(0 0% 78%);
  --gray9: hsl(0 0% 56.1%);
  --gray10: hsl(0 0% 52.3%);
  --gray11: hsl(0 0% 43.5%);
  --gray12: hsl(0 0% 9%);

  --gold1: hsl(50 20% 99.1%);
  --gold2: hsl(47 52.9% 96.7%);
  --gold3: hsl(46 38.2% 93.7%);
  --gold4: hsl(44 32.7% 90.1%);
  --gold5: hsl(43 29.9% 85.7%);
  --gold6: hsl(41 28.3% 79.8%);
  --gold7: hsl(39 27.6% 71.9%);
  --gold8: hsl(36 27.2% 61.8%);
  --gold9: hsl(36 20% 49.5%);
  --gold10: hsl(36 19.8% 45.7%);
  --gold11: hsl(36 20% 39%);
  --gold12: hsl(36 16% 20%);
}

.theme-blue.dark-mode {
  --gold1: hsl(44 9% 8.3%);
  --gold2: hsl(43 14.3% 9.6%);
  --gold3: hsl(42 15.5% 13%);
  --gold4: hsl(41 16.4% 15.6%);
  --gold5: hsl(41 16.9% 17.8%);
  --gold6: hsl(40 17.6% 20.8%);
  --gold7: hsl(38 18.5% 26.4%);
  --gold8: hsl(36 19.6% 35.1%);
  --gold9: hsl(36 20% 49.5%);
  --gold10: hsl(36 22.3% 54.5%);
  --gold11: hsl(35 30% 64%);
  --gold12: hsl(49 52% 93.8%);

  --gray1: hsl(0 0% 8.5%);
  --gray2: hsl(0 0% 11%);
  --gray3: hsl(0 0% 13.6%);
  --gray4: hsl(0 0% 15.8%);
  --gray5: hsl(0 0% 17.9%);
  --gray6: hsl(0 0% 20.5%);
  --gray7: hsl(0 0% 24.3%);
  --gray8: hsl(0 0% 31.2%);
  --gray9: hsl(0 0% 43.9%);
  --gray10: hsl(0 0% 49.4%);
  --gray11: hsl(0 0% 62.8%);
  --gray12: hsl(0 0% 93%);

  --amber1: hsl(36 100% 6.1%);
  --amber2: hsl(35 100% 7.6%);
  --amber3: hsl(32 100% 10.2%);
  --amber4: hsl(32 100% 12.4%);
  --amber5: hsl(33 100% 14.6%);
  --amber6: hsl(35 100% 17.1%);
  --amber7: hsl(35 91% 21.6%);
  --amber8: hsl(36 100% 25.5%);
  --amber9: hsl(39 100% 57%);
  --amber10: hsl(43 100% 64%);
  --amber11: hsl(39 90% 49.8%);
  --amber12: hsl(39 97% 93.2%);

  --sky1: hsl(205 45% 8.6%);
  --sky2: hsl(202 71.4% 9.6%);
  --sky3: hsl(201 74.6% 12.2%);
  --sky4: hsl(201 77.4% 14.4%);
  --sky5: hsl(200 80.3% 16.5%);
  --sky6: hsl(200 84.1% 18.9%);
  --sky7: hsl(199 90.2% 22.1%);
  --sky8: hsl(198 100% 26.1%);
  --sky9: hsl(193 98% 70%);
  --sky10: hsl(192 100% 77%);
  --sky11: hsl(192 85% 55.8%);
  --sky12: hsl(198 98% 95.8%);

  --brown1: hsl(22 15% 8.7%);
  --brown2: hsl(20 28.3% 10.4%);
  --brown3: hsl(20 28% 14%);
  --brown4: hsl(21 28.4% 16.5%);
  --brown5: hsl(22 28.7% 18.9%);
  --brown6: hsl(23 29% 22.3%);
  --brown7: hsl(25 29.5% 27.8%);
  --brown8: hsl(27 30.1% 35.9%);
  --brown9: hsl(28 34% 51%);
  --brown10: hsl(28 41.4% 55.8%);
  --brown11: hsl(28 60% 64.5%);
  --brown12: hsl(30 67% 94%);

  --teal1: hsl(168 48% 6.5%);
  --teal2: hsl(169 77.8% 7.1%);
  --teal3: hsl(170 76.1% 9.2%);
  --teal4: hsl(171 75.8% 11%);
  --teal5: hsl(171 75.7% 12.8%);
  --teal6: hsl(172 75.8% 15.1%);
  --teal7: hsl(172 76.7% 18.6%);
  --teal8: hsl(173 80.2% 23.7%);
  --teal9: hsl(173 80% 36%);
  --teal10: hsl(174 83.9% 38.2%);
  --teal11: hsl(174 90% 40.7%);
  --teal12: hsl(166 73% 93.1%);

  --cyan1: hsl(192 60% 7.2%);
  --cyan2: hsl(192 71.4% 8.2%);
  --cyan3: hsl(192 75.9% 10.8%);
  --cyan4: hsl(192 79.3% 12.8%);
  --cyan5: hsl(192 82.5% 14.6%);
  --cyan6: hsl(192 86.6% 16.9%);
  --cyan7: hsl(192 92.6% 20.1%);
  --cyan8: hsl(192 100% 24.5%);
  --cyan9: hsl(190 95% 39%);
  --cyan10: hsl(188 100% 40%);
  --cyan11: hsl(186 100% 42.2%);
  --cyan12: hsl(185 73% 93.2%);

  --blue1: hsl(212 35% 9.2%);
  --blue2: hsl(216 50% 11.8%);
  --blue3: hsl(214 59.4% 15.3%);
  --blue4: hsl(214 65.8% 17.9%);
  --blue5: hsl(213 71.2% 20.2%);
  --blue6: hsl(212 77.4% 23.1%);
  --blue7: hsl(211 85.1% 27.4%);
  --blue8: hsl(211 89.7% 34.1%);
  --blue9: hsl(206 100% 50%);
  --blue10: hsl(209 100% 60.6%);
  --blue11: hsl(210 100% 66.1%);
  --blue12: hsl(206 98% 95.8%);

  --indigo1: hsl(229 24% 10%);
  --indigo2: hsl(230 36.4% 12.9%);
  --indigo3: hsl(228 43.3% 17.5%);
  --indigo4: hsl(227 47.2% 21%);
  --indigo5: hsl(227 50% 24.1%);
  --indigo6: hsl(226 52.9% 28.2%);
  --indigo7: hsl(226 56% 34.5%);
  --indigo8: hsl(226 58.2% 44.1%);
  --indigo9: hsl(226 70% 55.5%);
  --indigo10: hsl(227 75.2% 61.6%);
  --indigo11: hsl(228 100% 75.9%);
  --indigo12: hsl(226 83% 96.3%);

  --purple1: hsl(284 20% 9.6%);
  --purple2: hsl(283 30% 11.8%);
  --purple3: hsl(281 37.5% 16.5%);
  --purple4: hsl(280 41.2% 20%);
  --purple5: hsl(279 43.8% 23.3%);
  --purple6: hsl(277 46.4% 27.5%);
  --purple7: hsl(275 49.3% 34.6%);
  --purple8: hsl(272 52.1% 45.9%);
  --purple9: hsl(272 51% 54%);
  --purple10: hsl(273 57.3% 59.1%);
  --purple11: hsl(275 80% 71%);
  --purple12: hsl(279 75% 95.7%);

  --red1: hsl(353 23% 9.8%);
  --red2: hsl(357 34.4% 12%);
  --red3: hsl(356 43.4% 16.4%);
  --red4: hsl(356 47.6% 19.2%);
  --red5: hsl(356 51.1% 21.9%);
  --red6: hsl(356 55.2% 25.9%);
  --red7: hsl(357 60.2% 31.8%);
  --red8: hsl(358 65% 40.4%);
  --red9: hsl(358 75% 59%);
  --red10: hsl(358 85.3% 64%);
  --red11: hsl(358 100% 69.5%);
  --red12: hsl(351 89% 96%);

  --crimson1: hsl(335 20% 9.6%);
  --crimson2: hsl(335 32.2% 11.6%);
  --crimson3: hsl(335 42.5% 16.5%);
  --crimson4: hsl(335 47.2% 19.3%);
  --crimson5: hsl(335 50.9% 21.8%);
  --crimson6: hsl(335 55.7% 25.3%);
  --crimson7: hsl(336 62.9% 30.8%);
  --crimson8: hsl(336 74.9% 39%);
  --crimson9: hsl(336 80% 57.8%);
  --crimson10: hsl(339 84.1% 62.6%);
  --crimson11: hsl(341 90% 67.3%);
  --crimson12: hsl(332 87% 96%);

  --pink1: hsl(318 25% 9.6%);
  --pink2: hsl(319 32.2% 11.6%);
  --pink3: hsl(319 41% 16%);
  --pink4: hsl(320 45.4% 18.7%);
  --pink5: hsl(320 49% 21.1%);
  --pink6: hsl(321 53.6% 24.4%);
  --pink7: hsl(321 61.1% 29.7%);
  --pink8: hsl(322 74.9% 37.5%);
  --pink9: hsl(322 65% 54.5%);
  --pink10: hsl(323 72.8% 59.2%);
  --pink11: hsl(325 90% 66.4%);
  --pink12: hsl(322 90% 95.8%);
}

article pre {
  margin-top: var(--space4);
  margin-bottom: var(--space4);
  overflow-x: auto;
  background: var(--slate2);
  background: linear-gradient(-25deg, var(--slate1), var(--slate3));

  padding-left: var(--space2);
  padding-right: var(--space2);

  padding-top: var(--space4);
  padding-bottom: var(--space4);

  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  color: var(--slate11);
  line-height: 1.6em;

  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

  font-size: 0.85em;
}

@media only screen and (min-width: 600px) {
  article pre {
    border-radius: 5px;

    margin-left: calc(-1 * var(--space6));
    margin-right: 0;
    padding-left: var(--space6);
    padding-right: var(--space6);

    padding-top: var(--space5);
    padding-bottom: var(--space5);
    margin-top: var(--space6);
    margin-bottom: var(--space6);

    font-size: 0.9em;
  }
}

pre code {
  font-family: -ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
}

article pre::selection,
article pre ::selection {
  background: var(--gray6);
}

pre[class*='language-'] {
  overflow: auto;
  position: relative;
}