/* Color Scheme */
:root {
  --black: #000000;
  --black-1: #666666;
  --black-2: #000000;
  --red: #880000;
  --green: #008800;
  --yellow: #ffff00;
  --blue: #000088;
  --magenta: #ff00ff;
  --cyan: #00ffff;

  --black-bright: #444444;
  --red-bright: #ff0000;
  --green-bright: #00ff00;
  --yellow-bright: #ffff88;
  --blue-bright: #0000ff;
  --magenta-bright: #ff88ff;
  --cyan-bright: #88ffff;

  --gray: #888888;
  --white: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Color definitions */
    --black-1: #011627; /* the dark blue default background */
    --black-2: #01111d; /* notification background */
    --black-3: #0b2942; /* popup completion background */
    --black-4: #0e293f; /* folded text background */

    --red-1: #f78c6c; /* numbers in code, (more orange than red) */
    --red-2: #ef5350; /* error font effect, font color for deleted text */
    --red-3: #c75450; /* text style error */
    --red-4: #d1243b; /* default error font color */
    --red-5: #713d40; /* brown-ish effect, Grammar Error */
    --red-6: #781732; /* error hint background */
    --red-7: #4b1515; /* line coverage uncovered */

    --green-1: #c5e478; /* technically a green, but used as ansi-yellow */
    --green-2: #addb67; /* green in code, weak warning */
    --green-3: #22da6e;
    --green-4: #64aa00; /* typo */
    --green-5: #264b33; /* line coverage background full */

    --yellow-1: #ffeb95;
    --yellow-2: #ecc48d; /* strings in code, links */
    --yellow-3: #ffcb8b; /* usual yellow in code, warnings */
    --yellow-4: #f49810; /* server problem color */
    --yellow-5: #f0a732; /* text style warning */
    --yellow-6: #665014; /* warning hint */

    --blue-1: #c5e4fd; /* line number on caret row */
    --blue-2: #82aaff;
    --blue-3: #5e82ce; /* code lens */
    --blue-4: #4373c2; /* selection background */
    --blue-5: #084d81; /* indent guide, whitespace chars */
    --blue-6: #314365; /* search result background */
    --blue-7: #1d3b53; /* promotion pane */
    --blue-8: #122d42; /* background of inline hint */

    --magenta-1: #c792ea; /* code keywords */
    --magenta-2: #7e57c2; /* underline selected tab */

    --cyan-1: #7fdbca; /* light "blue" in code, reference */
    --cyan-2: #21c7a8;
    --cyan-3: #3593c4; /* text style suggestion */
    --cyan-4: #57b6c2; /* live template variable */
    --cyan-5: #12404b; /* line coverage partial */

    --gray-1: #b3bac5; /* unused code */
    --gray-2: #c3d3de; /* label */
    --gray-3: #5f7e97; /* color of text in inline hint */
    --gray-4: #808080; /* inactive hyperlink */
    --gray-5: #637777; /* comment */
    --gray-6: #4b6479; /* line number, guide */
    --gray-7: #5a5d63; /* hint border */
    --gray-8: #575656;

    --white-1: #d6deeb; /* default font color */
    --white-2: #ffffff; /* live template active segment */
  }
}

/* Apply the color scheme to the html */
:root {
  --background: var(--white-1);
  --foreground: var(--black-2);
  --border-color: var(--black-1);

  --mark-underline-color: var(--green);
  --link-color: var(--blue-bright);
  --link-focus-outline: rgba(0,0,0,.2);

  --keyboard-background: #eee;

  counter-reset: caption;
  counter-reset: figcaption;
  font: 14px sans;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--black-2);
    --foreground: var(--white-1);
    --border-color: #5f7e97;

    --mark-underline-color: var(--yellow);
    --link-color: var(--yellow-2);
    --link-focus-outline: rgba(255,255,255,.8);
    --keyboard-background: color-mix(in srgb, #000 30%, transparent);
  }

}

body { background: var(--background); color: var(--foreground); }
a:link, a:link:hover, a:visited, a:visited:hover { color: var(--link-color) }
kbd { background-color: var(--keyboard-background); }
*[disabled] { color: var(--gray); }

/*
 * Layout 
 */

/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin */
body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, dl, dd {
  margin: 0;
}

body {
  font: 1.2rem/1.62 sans;
  margin: 1em auto;
  max-width: 48em;
  padding: 0 .62em;
}

/* Justify and hyphenate all paragraphs */
p {
  hyphens: auto;
  margin-top: 1rem;
  text-align: justify;
  text-wrap: pretty;
}

a { text-decoration: none; }

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:focus {
  outline-offset: 2px;
  outline: 2px solid var(--link-focus-outline);
}

/* align ol and ul */

/* Make images easier to work with */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}

/* Prevent textarea from overflowing */
textarea {
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Styles for inline code or code snippets */
code, pre {
  font-size: 85%;
}

pre {
  padding: 0 1.4rem;
  max-width: 100%;
  overflow: auto;
  border-radius: 4px;
}

pre code {
  font-size: 95%;
  position: relative;
}

kbd {
  border-radius: .2em;
  box-shadow: 0 0 0 1px #aaa;
  font-size: .8em;
  display: inline-block;
  font-variant: small-caps;
  padding: 0.08em 0.4em;
  text-align: center;
}

/* Better tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  max-width: 100%;
  border-top: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
  /* display: block; */
  overflow-x: auto; /* does not work because element is not block */
  /* white-space: nowrap; */
  counter-increment: caption;
}
/* add bottom border on column table headings  */
table tr > th[scope='col'] {
  border-bottom: 1.36px solid var(--border-color);
}
/* add right border on row table headings  */
table tr > th[scope='row'] {
  border-right: 1.36px solid var(--border-color);
}
table > tbody > tr:first-child > td,
table > tbody > tr:first-child > th {
  border-top: 1.36px solid var(--border-color);
}
table > tbody > tr:last-child > td,
table > tbody > tr:last-child > th {
  border-bottom: 1.36px solid var(--border-color);
}

th, td {
  text-align: center;
  padding: 0.5rem;
  line-height: 1.1;
}

.width-full > * { width: 100%; }

/* Table and Image caption */
figcaption, caption {
  text-align: left;
  font-size: 0.923em;
  padding: 0a 0.25em 0.25em;
  width: 100%;
  margin-left: 0;
}

caption::before {
  content: 'Table ' counter(caption) '. ';
  font-weight: bold;
}

figcaption::before {
  counter-increment: figcaption;
  content: 'Figure ' counter(figcaption) '. ';
  font-weight: bold;
}

figcaption::after {
  content: 'To see more details, use Right-click → Open Image';
  float: right;
  font-size: .5em;
}

/* definition lists */
dt {
  font-weight: bold;
}

dd {
  margin-left: 1ch;
}

dd > p:first-child {
  margin-top: 0;
}

/* marked text */
mark {
  background: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mark-underline-color);
}

/* allow scroll on the x-axis */
.scroll-wrapper {
  overflow-x: auto;
}

/* if a table is wrapped in a scroll wrapper,
  the table cells shouldn't wrap */
.scroll-wrapper > table td {
  white-space: nowrap;
}

/* Nested ordered list for ToC */
nav.toc {
  ul { padding-left: 1em }
  li { display: block }
  li li { padding-left: 2em }
}

/* Center align author name, use small caps and add vertical spacing  */
.author {
  margin: 0.85rem 0;
  font-variant-caps: small-caps;
  text-align: center;
}

label.sidenote-toggle:not(.sidenote-number) {
  display: none;
}

blockquote:not(.sidenote) {
  border-left: .2em solid gray;
  padding-left: 0.5em;
}

/* sidenotes inside blockquotes are indented more */
blockquote .sidenote {
  margin-right: -24vw;
  width: 18vw;
}


label.sidenote-toggle {
  display: inline;
  cursor: pointer;
}

input.sidenote-toggle {
  display: none;
}

@media (max-width: 1050px) {
  label.sidenote-toggle:not(.sidenote-number) {
    display: inline;
  }
  .sidenote {
    display: none;
  }
  .sidenote-toggle:checked + .sidenote {
    display: block;
    margin: 0.5rem 1.25rem 1rem 0.5rem;
    float: left;
    left: 1rem;
    clear: both;
    width: 95%;
  }
  /* tweak indentation of sidenote inside a blockquote */
  blockquote .sidenote {
    margin-right: -25vw;
    width: 16vw;
  }
}

/* Make footnote text smaller and left align it (looks bad with long URLs) */
.footnotes p {
  text-align: left;
  line-height: 1.5;
  font-size: 85%;
  margin-bottom: 0.4rem;
}
.footnotes {
  border-top: 1px solid var(--footnotes-border-color);
}

/* Center title and paragraph */
.abstract,
.abstract p {
  text-align: center;
  margin-top: 0;
}
.abstract {
  margin: 2.25rem 0;
}
.abstract > h2 {
  font-size: 1rem;
  margin-bottom: -0.2rem;
}

.smallcaps {
  font-variant: small-caps;
}

/* Heading typography */
h1, h2 { line-height: 1.2; }
h3, h4, h5, h6 { line-height: 1.625rem; }

h2, h3, h4, h5, h6 { margin-bottom: 0.8rem; }
h1 + h2 { margin-top: 1.625rem; }
h2 + h3, h3 + h4, h4 + h5 { margin-top: 1rem; }
h5 + h6 { margin-top: -0.8rem; }

h1 {
  font-family: serif;
  text-align: center;
  font-size: 2.5rem;
  line-height: 3.25rem;
  margin-bottom: 1.625rem;
}
h2 { font-size: 1.7rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
h6 {
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
}

/* headline markdown prefixes */
h1, h2, h3, h4, h5, h6 {
  &::before {
    display: inline-block;
    margin-right: .5em;
    color: var(--gray-5);
  }
}

h2::before { content: '#'; }
h3::before { content: '##'; }
h4::before { content: '###'; }
h5::before { content: '####'; }
h6::before { content: '#####'; }

.reverse {
  display: inline-block;
  transform: scale(-1, 1);
}

/* syntax highlighting */

.sourceCode .kw,
.sourceCode .cf { font-weight: bold; }
.sourceCode .dt { font-weight: bold; }
.sourceCode .co { font-style: italic; }

/* boxes */
.info, .warn {
  border-radius: 4px;
  padding: .5em .75em;
  > * { margin: 0; }
}

.info { background: #90CAF9; }
.warn { background: #FFE082; }

@media (prefers-color-scheme: dark) {
  .info { background: #222; }
  .warn { background: #666633; }
}