/*
The default theme is dark.
SCSS variables (`$black`) are not affected by scripts. (Inside code blocks, ...)
CSS variables (`var(--black)`) are affected by scripts. (Everywhere else.)
*/
:root {
  --black: #000000;
  --black-compl: #ffffff;
  --black-trans: #00000060;
  --black-compl-trans: #ffffff60;
  --dark: #404040;
  --dark-compl: #bfbfbf;
  --dark-trans: #40404060;
  --dark-compl-trans: #bfbfbf60;
  --gray: #808080;
  --gray-compl: #7f7f7f;
  --gray-trans: #80808060;
  --gray-compl-trans: #7f7f7f60;
  --lightgray: #c0c0c0;
  --lightgray-compl: #3f3f3f;
  --lightgray-trans: #c0c0c060;
  --lightgray-compl-trans: #3f3f3f60;
  --white: #ffffff;
  --white-compl: #000000;
  --white-trans: #ffffff60;
  --white-compl-trans: #00000060;
  --red: #c02020;
  --red-compl: #3fdfdf;
  --red-trans: #c0202060;
  --red-compl-trans: #3fdfdf60;
  --green: #20c020;
  --green-compl: #df3fdf;
  --green-trans: #20c02060;
  --green-compl-trans: #df3fdf60;
  --slateblue: #4040c0;
  --slateblue-compl: #bfbf3f;
  --slateblue-trans: #4040c060;
  --slateblue-compl-trans: #bfbf3f60;
  --blue: #2020c0;
  --blue-compl: #dfdf3f;
  --blue-trans: #2020c060;
  --blue-compl-trans: #dfdf3f60;
  --aqua: #40c0ff;
  --aqua-compl: #bf3f00;
  --aqua-trans: #40c0ff60;
  --aqua-compl-trans: #bf3f0060;
  --emerald: #40c040;
  --emerald-compl: #bf3fbf;
  --emerald-trans: #40c04060;
  --emerald-compl-trans: #bf3fbf60;
  --turquoise: #40ffc0;
  --turquoise-compl: #bf003f;
  --turquoise-trans: #40ffc060;
  --turquoise-compl-trans: #bf003f60;
  --seagreen: #20c0c0;
  --seagreen-compl: #df3f3f;
  --seagreen-trans: #20c0c060;
  --seagreen-compl-trans: #df3f3f60;
  --violet: #c040ff;
  --violet-compl: #3fbf00;
  --violet-trans: #c040ff60;
  --violet-compl-trans: #3fbf0060;
  --pink: #ff40c0;
  --pink-compl: #00bf3f;
  --pink-trans: #ff40c060;
  --pink-compl-trans: #00bf3f60;
  --grassgreen: #c0ff40;
  --grassgreen-compl: #3f00bf;
  --grassgreen-trans: #c0ff4060;
  --grassgreen-compl-trans: #3f00bf60;
  --gold: #ffc040;
  --gold-compl: #003fbf;
  --gold-trans: #ffc04060;
  --gold-compl-trans: #003fbf60;
  --brown: #c08020;
  --brown-compl: #3f7fdf;
  --brown-trans: #c0802060;
  --brown-compl-trans: #3f7fdf60;
}

:root {
  --sidebar-width: min(450px, 60%);
}

body .markdown {
  background-color: var(--dark);
  color: var(--white);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 1px;
  transition: color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}
body .markdown p {
  margin-top: 1.571rem;
}
body .markdown ::selection {
  background-color: var(--dark-compl);
  color: var(--white-compl);
  text-decoration-color: var(--white-compl);
}
body .markdown img, body .markdown video, body .markdown iframe {
  max-width: min(21.43rem, 90%);
  max-height: 21.43rem;
}

/* Footnotes */
.markdown hr.footnote-hr {
  margin-top: 4rem;
}
.markdown div.footnote-cite {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.markdown span.footnote-ref {
  vertical-align: super;
  font-size: 0.762rem;
}
.markdown span.footnote-ref a {
  border: none;
}

/* Blockquote */
.markdown blockquote {
  background-color: var(--black-trans);
  width: 75%;
  border-left: 0.238rem solid #808080;
  padding: 0.571rem;
}

/* Colors */
.markdown {
  /* Default color */
}
.markdown .color-black {
  color: var(--black);
}
.markdown .color-black::selection, .markdown .color-black ::selection {
  color: var(--black-compl);
}
.markdown .highlight-black {
  background-color: var(--black);
}
.markdown .highlight-black::selection {
  background-color: var(--black-compl);
}
.markdown .color-black svg path, .markdown .color-black svg rect, .markdown .color-black svg circle {
  fill: var(--black);
}
.markdown .color-dark {
  color: var(--dark);
}
.markdown .color-dark::selection, .markdown .color-dark ::selection {
  color: var(--dark-compl);
}
.markdown .highlight-dark {
  background-color: var(--dark);
}
.markdown .highlight-dark::selection {
  background-color: var(--dark-compl);
}
.markdown .color-dark svg path, .markdown .color-dark svg rect, .markdown .color-dark svg circle {
  fill: var(--dark);
}
.markdown .color-gray {
  color: var(--gray);
}
.markdown .color-gray::selection, .markdown .color-gray ::selection {
  color: var(--gray-compl);
}
.markdown .highlight-gray {
  background-color: var(--gray);
}
.markdown .highlight-gray::selection {
  background-color: var(--gray-compl);
}
.markdown .color-gray svg path, .markdown .color-gray svg rect, .markdown .color-gray svg circle {
  fill: var(--gray);
}
.markdown .color-lightgray {
  color: var(--lightgray);
}
.markdown .color-lightgray::selection, .markdown .color-lightgray ::selection {
  color: var(--lightgray-compl);
}
.markdown .highlight-lightgray {
  background-color: var(--lightgray);
}
.markdown .highlight-lightgray::selection {
  background-color: var(--lightgray-compl);
}
.markdown .color-lightgray svg path, .markdown .color-lightgray svg rect, .markdown .color-lightgray svg circle {
  fill: var(--lightgray);
}
.markdown .color-white {
  color: var(--white);
}
.markdown .color-white::selection, .markdown .color-white ::selection {
  color: var(--white-compl);
}
.markdown .highlight-white {
  background-color: var(--white);
}
.markdown .highlight-white::selection {
  background-color: var(--white-compl);
}
.markdown .color-white svg path, .markdown .color-white svg rect, .markdown .color-white svg circle {
  fill: var(--white);
}
.markdown .color-red {
  color: var(--red);
}
.markdown .color-red::selection, .markdown .color-red ::selection {
  color: var(--red-compl);
}
.markdown .highlight-red {
  background-color: var(--red);
}
.markdown .highlight-red::selection {
  background-color: var(--red-compl);
}
.markdown .color-red svg path, .markdown .color-red svg rect, .markdown .color-red svg circle {
  fill: var(--red);
}
.markdown .color-green {
  color: var(--green);
}
.markdown .color-green::selection, .markdown .color-green ::selection {
  color: var(--green-compl);
}
.markdown .highlight-green {
  background-color: var(--green);
}
.markdown .highlight-green::selection {
  background-color: var(--green-compl);
}
.markdown .color-green svg path, .markdown .color-green svg rect, .markdown .color-green svg circle {
  fill: var(--green);
}
.markdown .color-slateblue {
  color: var(--slateblue);
}
.markdown .color-slateblue::selection, .markdown .color-slateblue ::selection {
  color: var(--slateblue-compl);
}
.markdown .highlight-slateblue {
  background-color: var(--slateblue);
}
.markdown .highlight-slateblue::selection {
  background-color: var(--slateblue-compl);
}
.markdown .color-slateblue svg path, .markdown .color-slateblue svg rect, .markdown .color-slateblue svg circle {
  fill: var(--slateblue);
}
.markdown .color-blue {
  color: var(--blue);
}
.markdown .color-blue::selection, .markdown .color-blue ::selection {
  color: var(--blue-compl);
}
.markdown .highlight-blue {
  background-color: var(--blue);
}
.markdown .highlight-blue::selection {
  background-color: var(--blue-compl);
}
.markdown .color-blue svg path, .markdown .color-blue svg rect, .markdown .color-blue svg circle {
  fill: var(--blue);
}
.markdown .color-aqua {
  color: var(--aqua);
}
.markdown .color-aqua::selection, .markdown .color-aqua ::selection {
  color: var(--aqua-compl);
}
.markdown .highlight-aqua {
  background-color: var(--aqua);
}
.markdown .highlight-aqua::selection {
  background-color: var(--aqua-compl);
}
.markdown .color-aqua svg path, .markdown .color-aqua svg rect, .markdown .color-aqua svg circle {
  fill: var(--aqua);
}
.markdown .color-emerald {
  color: var(--emerald);
}
.markdown .color-emerald::selection, .markdown .color-emerald ::selection {
  color: var(--emerald-compl);
}
.markdown .highlight-emerald {
  background-color: var(--emerald);
}
.markdown .highlight-emerald::selection {
  background-color: var(--emerald-compl);
}
.markdown .color-emerald svg path, .markdown .color-emerald svg rect, .markdown .color-emerald svg circle {
  fill: var(--emerald);
}
.markdown .color-turquoise {
  color: var(--turquoise);
}
.markdown .color-turquoise::selection, .markdown .color-turquoise ::selection {
  color: var(--turquoise-compl);
}
.markdown .highlight-turquoise {
  background-color: var(--turquoise);
}
.markdown .highlight-turquoise::selection {
  background-color: var(--turquoise-compl);
}
.markdown .color-turquoise svg path, .markdown .color-turquoise svg rect, .markdown .color-turquoise svg circle {
  fill: var(--turquoise);
}
.markdown .color-seagreen {
  color: var(--seagreen);
}
.markdown .color-seagreen::selection, .markdown .color-seagreen ::selection {
  color: var(--seagreen-compl);
}
.markdown .highlight-seagreen {
  background-color: var(--seagreen);
}
.markdown .highlight-seagreen::selection {
  background-color: var(--seagreen-compl);
}
.markdown .color-seagreen svg path, .markdown .color-seagreen svg rect, .markdown .color-seagreen svg circle {
  fill: var(--seagreen);
}
.markdown .color-violet {
  color: var(--violet);
}
.markdown .color-violet::selection, .markdown .color-violet ::selection {
  color: var(--violet-compl);
}
.markdown .highlight-violet {
  background-color: var(--violet);
}
.markdown .highlight-violet::selection {
  background-color: var(--violet-compl);
}
.markdown .color-violet svg path, .markdown .color-violet svg rect, .markdown .color-violet svg circle {
  fill: var(--violet);
}
.markdown .color-pink {
  color: var(--pink);
}
.markdown .color-pink::selection, .markdown .color-pink ::selection {
  color: var(--pink-compl);
}
.markdown .highlight-pink {
  background-color: var(--pink);
}
.markdown .highlight-pink::selection {
  background-color: var(--pink-compl);
}
.markdown .color-pink svg path, .markdown .color-pink svg rect, .markdown .color-pink svg circle {
  fill: var(--pink);
}
.markdown .color-grassgreen {
  color: var(--grassgreen);
}
.markdown .color-grassgreen::selection, .markdown .color-grassgreen ::selection {
  color: var(--grassgreen-compl);
}
.markdown .highlight-grassgreen {
  background-color: var(--grassgreen);
}
.markdown .highlight-grassgreen::selection {
  background-color: var(--grassgreen-compl);
}
.markdown .color-grassgreen svg path, .markdown .color-grassgreen svg rect, .markdown .color-grassgreen svg circle {
  fill: var(--grassgreen);
}
.markdown .color-gold {
  color: var(--gold);
}
.markdown .color-gold::selection, .markdown .color-gold ::selection {
  color: var(--gold-compl);
}
.markdown .highlight-gold {
  background-color: var(--gold);
}
.markdown .highlight-gold::selection {
  background-color: var(--gold-compl);
}
.markdown .color-gold svg path, .markdown .color-gold svg rect, .markdown .color-gold svg circle {
  fill: var(--gold);
}
.markdown .color-brown {
  color: var(--brown);
}
.markdown .color-brown::selection, .markdown .color-brown ::selection {
  color: var(--brown-compl);
}
.markdown .highlight-brown {
  background-color: var(--brown);
}
.markdown .highlight-brown::selection {
  background-color: var(--brown-compl);
}
.markdown .color-brown svg path, .markdown .color-brown svg rect, .markdown .color-brown svg circle {
  fill: var(--brown);
}
.markdown svg path, .markdown svg rect, .markdown svg circle {
  fill: var(--white);
}

/* Box */
.markdown span.box {
  padding: 0.571rem;
  border: 0.143rem solid var(--gray);
}
.markdown div.box {
  max-width: 90%;
  padding: 0.571rem;
  margin: 1.571rem 1rem;
  border: 0.143rem solid var(--gray);
}
.markdown .box.no-border {
  border: none;
}
.markdown .box.inline {
  display: inline-block;
}

/* Sizes */
.markdown .size-tiny {
  font-size: 0.619rem;
}
.markdown .size-tiny img, .markdown .size-tiny video, .markdown .size-tiny iframe {
  max-width: min(11.9rem, 90%);
  max-height: 11.9rem;
}
.markdown .line-height-tiny {
  line-height: 0.6;
}
.markdown .line-height-tiny pre.fenced-code-block {
  line-height: 0.6;
}
.markdown .box.width-tiny {
  width: 7.143rem;
}
.markdown .box.height-tiny {
  height: 7.143rem;
}
.markdown .size-small {
  font-size: 0.762rem;
}
.markdown .size-small img, .markdown .size-small video, .markdown .size-small iframe {
  max-width: min(16.67rem, 90%);
  max-height: 16.67rem;
}
.markdown .line-height-small {
  line-height: 0.85;
}
.markdown .line-height-small pre.fenced-code-block {
  line-height: 0.85;
}
.markdown .box.width-small {
  width: 10rem;
}
.markdown .box.height-small {
  height: 10rem;
}
.markdown .size-medium {
  font-size: 1rem;
}
.markdown .size-medium img, .markdown .size-medium video, .markdown .size-medium iframe {
  max-width: min(21.43rem, 90%);
  max-height: 21.43rem;
}
.markdown .line-height-medium {
  line-height: 1.1;
}
.markdown .line-height-medium pre.fenced-code-block {
  line-height: 1.1;
}
.markdown .box.width-medium {
  width: 12.86rem;
}
.markdown .box.height-medium {
  height: 12.86rem;
}
.markdown .size-big {
  font-size: 1.19rem;
}
.markdown .size-big img, .markdown .size-big video, .markdown .size-big iframe {
  max-width: min(28.57rem, 90%);
  max-height: 28.57rem;
}
.markdown .line-height-big {
  line-height: 1.35;
}
.markdown .line-height-big pre.fenced-code-block {
  line-height: 1.35;
}
.markdown .box.width-big {
  width: 17.14rem;
}
.markdown .box.height-big {
  height: 17.14rem;
}
.markdown .size-giant {
  font-size: 1.571rem;
}
.markdown .size-giant img, .markdown .size-giant video, .markdown .size-giant iframe {
  max-width: min(34.29rem, 90%);
  max-height: 34.29rem;
}
.markdown .line-height-giant {
  line-height: 1.6;
}
.markdown .line-height-giant pre.fenced-code-block {
  line-height: 1.6;
}
.markdown .box.width-giant {
  width: 20.57rem;
}
.markdown .box.height-giant {
  height: 20.57rem;
}

/* Alignments */
.markdown .align-center {
  text-align: center;
}
.markdown .align-center table, .markdown .align-center img, .markdown .align-center video, .markdown .align-center iframe, .markdown .align-center .box, .markdown .align-center blockquote, .markdown .align-center svg {
  margin-left: auto;
  margin-right: auto;
}
.markdown .align-right {
  text-align: right;
}
.markdown .align-right table, .markdown .align-right img, .markdown .align-right video, .markdown .align-right iframe, .markdown .align-right .box, .markdown .align-right blockquote, .markdown .align-right svg {
  margin-left: auto;
  margin-right: 0;
}
.markdown .align-left {
  text-align: left;
}
.markdown .align-left table, .markdown .align-left img, .markdown .align-left video, .markdown .align-left iframe, .markdown .align-left .box, .markdown .align-left blockquote, .markdown .align-left svg {
  margin-left: 0;
  margin-right: auto;
}

/* Headers */
.markdown h1 {
  font-size: 2.667rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  transition: color 0.3s;
}
.markdown h1:hover {
  color: var(--white-trans);
  transition: color 0.3s;
}
.markdown h2 {
  font-size: 2.286rem;
  margin-top: 3.714rem;
  margin-bottom: 1.857rem;
  transition: color 0.3s;
}
.markdown h2:hover {
  color: var(--white-trans);
  transition: color 0.3s;
}
.markdown h3 {
  font-size: 2rem;
  margin-top: 3.143rem;
  margin-bottom: 1.5715rem;
  transition: color 0.3s;
}
.markdown h3:hover {
  color: var(--white-trans);
  transition: color 0.3s;
}
.markdown h4 {
  font-size: 1.571rem;
  margin-top: 2.429rem;
  margin-bottom: 1.2145rem;
  transition: color 0.3s;
}
.markdown h4:hover {
  color: var(--white-trans);
  transition: color 0.3s;
}
.markdown h5 {
  font-size: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  transition: color 0.3s;
}
.markdown h5:hover {
  color: var(--white-trans);
  transition: color 0.3s;
}
.markdown h6 {
  font-size: 0.762rem;
  margin-top: 1.571rem;
  margin-bottom: 0.7855rem;
  transition: color 0.3s;
}
.markdown h6:hover {
  color: var(--white-trans);
  transition: color 0.3s;
}
.markdown h1, .markdown h2 {
  border-bottom: 0.143rem solid var(--gray);
}

/* Tooltips */
.markdown .tooltip-message {
  position: fixed;
  visibility: hidden;
  border: 0.143rem solid var(--black);
  border-radius: 0.286rem;
  padding: 0.286rem;
  background-color: var(--gray);
  max-width: 80%;
  opacity: 0;
  transition: opacity 0.5s;
}
.markdown .tooltip-container:hover .tooltip-message {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s;
}

/* Links */
.markdown a:link {
  border-bottom: 0.143rem solid var(--aqua-trans);
  color: var(--aqua);
  text-decoration: none;
  transition: border 0.3s;
}
.markdown a:visited {
  color: var(--aqua);
  text-decoration: none;
}
.markdown a:hover {
  text-decoration: none;
  border-bottom: 0.143rem solid var(--aqua);
}
.markdown a::selection {
  color: var(--aqua-compl);
}

/* Fenced Code Block */
.markdown pre.line-num-width-0 span.code-fence-index {
  min-width: 1.071rem;
}
.markdown pre.line-num-width-1 span.code-fence-index {
  min-width: 1.571rem;
}
.markdown pre.line-num-width-2 span.code-fence-index {
  min-width: 2.071rem;
}
.markdown pre.line-num-width-3 span.code-fence-index {
  min-width: 2.571rem;
}
.markdown pre.line-num-width-4 span.code-fence-index {
  min-width: 3.071rem;
}
.markdown pre.line-num-width-5 span.code-fence-index {
  min-width: 3.571rem;
}
.markdown pre.line-num-width-6 span.code-fence-index {
  min-width: 4.071rem;
}
.markdown pre.fenced-code-block {
  padding: 0.571rem;
  background-color: #000000;
  width: 90%;
  overflow: auto;
  line-height: 1;
  margin-top: 1.571rem;
  margin-bottom: 1.571rem;
  /* Not affected by themes */
}
.markdown pre.fenced-code-block code {
  color: #ffffff;
}
.markdown pre.fenced-code-block code .color-black {
  color: #000000;
}
.markdown pre.fenced-code-block code .color-black::selection {
  color: #ffffff;
}
.markdown pre.fenced-code-block code .color-dark {
  color: #404040;
}
.markdown pre.fenced-code-block code .color-dark::selection {
  color: #bfbfbf;
}
.markdown pre.fenced-code-block code .color-gray {
  color: #808080;
}
.markdown pre.fenced-code-block code .color-gray::selection {
  color: #7f7f7f;
}
.markdown pre.fenced-code-block code .color-lightgray {
  color: #c0c0c0;
}
.markdown pre.fenced-code-block code .color-lightgray::selection {
  color: #3f3f3f;
}
.markdown pre.fenced-code-block code .color-white {
  color: #ffffff;
}
.markdown pre.fenced-code-block code .color-white::selection {
  color: #000000;
}
.markdown pre.fenced-code-block code .color-red {
  color: #c02020;
}
.markdown pre.fenced-code-block code .color-red::selection {
  color: #3fdfdf;
}
.markdown pre.fenced-code-block code .color-green {
  color: #20c020;
}
.markdown pre.fenced-code-block code .color-green::selection {
  color: #df3fdf;
}
.markdown pre.fenced-code-block code .color-slateblue {
  color: #4040c0;
}
.markdown pre.fenced-code-block code .color-slateblue::selection {
  color: #bfbf3f;
}
.markdown pre.fenced-code-block code .color-blue {
  color: #2020c0;
}
.markdown pre.fenced-code-block code .color-blue::selection {
  color: #dfdf3f;
}
.markdown pre.fenced-code-block code .color-aqua {
  color: #40c0ff;
}
.markdown pre.fenced-code-block code .color-aqua::selection {
  color: #bf3f00;
}
.markdown pre.fenced-code-block code .color-emerald {
  color: #40c040;
}
.markdown pre.fenced-code-block code .color-emerald::selection {
  color: #bf3fbf;
}
.markdown pre.fenced-code-block code .color-turquoise {
  color: #40ffc0;
}
.markdown pre.fenced-code-block code .color-turquoise::selection {
  color: #bf003f;
}
.markdown pre.fenced-code-block code .color-seagreen {
  color: #20c0c0;
}
.markdown pre.fenced-code-block code .color-seagreen::selection {
  color: #df3f3f;
}
.markdown pre.fenced-code-block code .color-violet {
  color: #c040ff;
}
.markdown pre.fenced-code-block code .color-violet::selection {
  color: #3fbf00;
}
.markdown pre.fenced-code-block code .color-pink {
  color: #ff40c0;
}
.markdown pre.fenced-code-block code .color-pink::selection {
  color: #00bf3f;
}
.markdown pre.fenced-code-block code .color-grassgreen {
  color: #c0ff40;
}
.markdown pre.fenced-code-block code .color-grassgreen::selection {
  color: #3f00bf;
}
.markdown pre.fenced-code-block code .color-gold {
  color: #ffc040;
}
.markdown pre.fenced-code-block code .color-gold::selection {
  color: #003fbf;
}
.markdown pre.fenced-code-block code .color-brown {
  color: #c08020;
}
.markdown pre.fenced-code-block code .color-brown::selection {
  color: #3f7fdf;
}
.markdown pre.fenced-code-block span.code-fence-index {
  display: inline-block;
  border-right: 0.143rem solid #40c040;
  text-align: right;
  padding-right: 0.571rem;
  margin-right: 1rem;
  padding-top: 0.143rem;
  padding-bottom: 0.143rem;
}
.markdown pre.fenced-code-block span.code-fence-row {
  display: inline-block;
  width: 100%;
  min-width: max-content;
  /* Thank you Chat GPT */
}
.markdown pre.fenced-code-block span.code-fence-row:hover {
  background-color: #404040;
}
.markdown pre.fenced-code-block span.code-fence-code {
  display: inline-block;
  padding-top: 0.143rem;
  padding-bottom: 0.143rem;
}
.markdown pre.fenced-code-block span.highlight.code-fence-row {
  background-color: #ffffff;
  color: #000000;
}
.markdown pre.fenced-code-block span.highlight.code-fence-row span.code-fence-index {
  border-right: 0.143rem solid #bf3fbf;
}
.markdown pre.fenced-code-block span.highlight.code-fence-row:hover {
  background-color: #ffffff60;
}
.markdown pre.fenced-code-block span.highlight span .color-black {
  color: #ffffff;
}
.markdown pre.fenced-code-block span.highlight span .color-dark {
  color: #bfbfbf;
}
.markdown pre.fenced-code-block span.highlight span .color-gray {
  color: #7f7f7f;
}
.markdown pre.fenced-code-block span.highlight span .color-lightgray {
  color: #3f3f3f;
}
.markdown pre.fenced-code-block span.highlight span .color-white {
  color: #000000;
}
.markdown pre.fenced-code-block span.highlight span .color-red {
  color: #3fdfdf;
}
.markdown pre.fenced-code-block span.highlight span .color-green {
  color: #df3fdf;
}
.markdown pre.fenced-code-block span.highlight span .color-slateblue {
  color: #bfbf3f;
}
.markdown pre.fenced-code-block span.highlight span .color-blue {
  color: #dfdf3f;
}
.markdown pre.fenced-code-block span.highlight span .color-aqua {
  color: #bf3f00;
}
.markdown pre.fenced-code-block span.highlight span .color-emerald {
  color: #bf3fbf;
}
.markdown pre.fenced-code-block span.highlight span .color-turquoise {
  color: #bf003f;
}
.markdown pre.fenced-code-block span.highlight span .color-seagreen {
  color: #df3f3f;
}
.markdown pre.fenced-code-block span.highlight span .color-violet {
  color: #3fbf00;
}
.markdown pre.fenced-code-block span.highlight span .color-pink {
  color: #00bf3f;
}
.markdown pre.fenced-code-block span.highlight span .color-grassgreen {
  color: #3f00bf;
}
.markdown pre.fenced-code-block span.highlight span .color-gold {
  color: #003fbf;
}
.markdown pre.fenced-code-block span.highlight span .color-brown {
  color: #3f7fdf;
}
.markdown button.copy-fenced-code {
  background-color: #404040;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  padding: 0.286rem;
  margin-top: 1rem;
  margin-left: 1rem;
  border-radius: 0.286rem;
  cursor: pointer;
  transition: background-color 0.5s ease-out;
}
.markdown button.copy-fenced-code:hover {
  background-color: #ffffff60;
  transition: background-color 0.5s ease-out;
}

/* Code Spans */
.markdown code.inline-code-span {
  color: #ffc040;
  background-color: #000000;
  border-radius: 0.143rem;
  padding: 0.143rem 0.286rem 0.143rem;
  white-space: pre;
}
.markdown code.inline-code-span::selection {
  color: #003fbf;
}
.markdown table tr:nth-last-child(odd) code.inline-code-span {
  background-color: #808080;
}

/* Table */
.markdown table.headless-table {
  border: 0.143rem solid var(--white);
}
.markdown table {
  border-collapse: collapse;
  margin: 1.571rem 1rem;
  /*break-inside: avoid;  // needs more research */
}
.markdown table th {
  background-color: var(--gray);
  transition: padding 0.5s ease-out;
  border: 0.143rem solid var(--lightgray);
}
.markdown table tr th:first-child {
  border-left: 0.238rem solid var(--gray);
}
.markdown table tr th:last-child {
  border-right: 0.238rem solid var(--gray);
}
.markdown table tr:first-child th {
  border-top: 0.238rem solid var(--gray);
}
.markdown table tr:last-child th {
  border-bottom: 0.238rem solid var(--gray);
}
.markdown table td, .markdown table th {
  padding: 0.857rem;
}
.markdown table tr:nth-last-child(odd) {
  background-color: var(--black);
}
.markdown table tr:nth-last-child(even) {
  background-color: var(--dark);
}
.markdown table thead.collapsible {
  cursor: pointer;
}
.markdown table thead.collapsed th {
  padding: 0.286rem;
  transition: padding 0.5s ease-out;
}
.markdown table .invisible th, .markdown table .invisible td {
  display: none;
}

/*
----- Lists -----
*/
.markdown ul, .markdown ol {
  padding-left: 1.524rem;
}
.markdown ul.no-bullet-list, .markdown ol.no-bullet-list {
  list-style-type: none;
}
.markdown li {
  padding: 0.286rem;
}

/*
----- Checkbox for task lists -----
*/
.markdown div.unchecked-box, .markdown div.checked-box {
  position: relative;
  top: 0.25rem;
  display: inline-block;
  border-radius: 0.19rem;
  width: 1rem;
  height: 1rem;
}
.markdown div.unchecked-box {
  background-color: var(--gray);
  margin-right: 0.571rem;
}
.markdown div.checked-box {
  background-color: var(--black);
  margin-right: 0.571rem;
}
.markdown span.checkmark {
  display: block;
  position: relative;
  left: 0.25rem;
  top: 0.125rem;
  width: 0.3333333333rem;
  height: 0.5rem;
  border-bottom: 0.143rem solid var(--white);
  border-right: 0.143rem solid var(--white);
  transform: rotate(45deg);
}
.markdown span.triangle {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  left: 0.1666666667rem;
  top: 0.3333333333rem;
  border-left: 0.3333333333rem solid #0000;
  border-right: 0.3333333333rem solid #0000;
  border-bottom: 0.3333333333rem solid var(--white);
}

/*
----- Sidebar -----
*/
#mdxt-sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  /* I want it to be above the header (in my personal blog) */
  top: 0;
  left: 0;
  background-color: var(--black);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

#mdxt-sidebar-close-button {
  position: absolute;
  top: 0;
  right: 1rem;
  font-size: 1.571rem;
  cursor: pointer;
}

#mdxt-sidebar-content {
  padding: 1.524rem;
}

#mdxt-sidebar-toggle {
  background-color: var(--gray);
  position: fixed;
  top: 15%;
  height: 70%;
  left: 0;
  transition: 0.5s;
  cursor: pointer;
}

#mdxt-sidebar-button-content {
  display: block;
  padding: 0.857rem 0.286rem 0px 0.286rem;
}