html
{
  color-scheme            : light;
  --text-color            : #000000;
  --page-color            : #ffffff;
  --hyperlink-color       : #4040b0;
  --muted-color           : #606060;
  --edge-color            : #e6e6e6;
  --table-rule-color      : #1a1a1a;
  --code-background-color : #f6f6f6;
  color                   : var(--text-color);
  background-color        : var(--page-color);
}

html[data-theme='dark']
{
  color-scheme            : dark;
  --text-color            : #F5F5F5;
  --page-color            : #212121;
  --hyperlink-color       : #8C9EFF;
  --muted-color           : #9E9E9E;
  --edge-color            : #424242;
  --table-rule-color      : #E0E0E0;
  --code-background-color : #263238;
}

body
{
  margin         : 0 auto 0 auto;
  max-width      : 42em;
  padding        : 50px 50px 50px 50px;
  overflow-wrap  : break-word;
  text-rendering : optimizeLegibility;
  font-kerning   : normal;
  font-family    : sans-serif;
}

p
{
  margin : 1em 0 1em 0;
}

a
{
  color           : var(--hyperlink-color);
  text-decoration : underline;
}

a:visited
{
  color : var(--hyperlink-color);
}

img
{
  max-width : 100%;
}

svg
{
  height    : auto;
  max-width : 100%;
}

h1
{
  margin-top : 1.4em;
}

h2
{
  margin-top : 1.4em;
}

h3
{
  margin-top : 1.4em;
}

h4
{
  margin-top : 1.4em;
}

h5
{
  margin-top : 1.4em;
}

h6
{
  margin-top : 1.4em;
}

h5
{
  font-size  : 1em;
  font-style : italic;
}

h6
{
  font-size  : 1em;
  font-style : italic;
}

h6
{
  font-weight : normal;
}

ol
{
  padding-left : 1.7em;
  margin-top   : 1em;
}

ul
{
  padding-left : 1.7em;
  margin-top   : 1em;
}

li > ol
{
  margin-top : 0;
}

li > ul
{
  margin-top : 0;
}

blockquote
{
  margin       : 1em 0 1em 1.7em;
  padding-left : 1em;
  border-left  : 2px solid var(--edge-color);
  color        : var(--muted-color);
}

blockquote .attribution
{
  text-align : right;
  font-style : italic;
  font-size  : 0.9em;
}

div.center
{
  text-align : center;
}

div.line-block
{
  margin     : 1em 0 1em 0;
  font-style : italic;
}

div.monoquote
{
  margin       : 1em 0 1em 1.7em;
  padding-left : 1em;
  border-left  : 2px solid var(--edge-color);
  color        : var(--muted-color);
  font-family  : monospace;
  font-size    : 85%;
}

div.monoquote .attribution
{
  text-align : right;
  font-style : italic;
}

figure
{
  margin : 1em 0 1em 0;
}

figure figcaption
{
  font-size  : 0.85em;
  font-style : italic;
  color      : var(--muted-color);
  margin-top : 0.5em;
}

pre
{
  margin           : 1em 0 1em 0;
  overflow         : auto;
  padding          : 0.75em 1em 0.75em 1em;
  background-color : var(--code-background-color);
  border           : 1px solid var(--edge-color);
}

code
{
  font-family : monospace;
  font-size   : 0.95em;
  margin      : 0 0 0 0;
  hyphens     : manual;
}

pre code
{
  padding       : 0 0 0 0;
  overflow      : visible;
  overflow-wrap : normal;
  font-size     : 0.85em;
}

.sourceCode
{
  background-color : rgba(0,0,0,0.0);
  overflow         : visible;
}

hr
{
  border     : none;
  color      : inherit;
  font-size  : 1.5em;
  height     : auto;
  margin     : 1em 0 1em 0;
  text-align : center;
}

hr::after
{
  content : "❧";
}

table
{
  margin               : 1em 0 1em 0;
  border-collapse      : collapse;
  width                : 100%;
  overflow-x           : auto;
  display              : block;
  font-variant-numeric : lining-nums tabular-nums;
}

table caption
{
  margin-bottom : 0.75em;
}

tbody
{
  margin-top    : 0.5em;
  border-top    : 1px solid var(--table-rule-color);
  border-bottom : 1px solid var(--table-rule-color);
}

th
{
  border-top : 1px solid var(--table-rule-color);
  padding    : 0.25em 0.5em 0.25em 0.5em;
}

td
{
  padding : 0.125em 0.5em 0.25em 0.5em;
}

header
{
  margin-bottom : 4em;
  text-align    : center;
}

footer
{
  margin-top  : 4em;
  padding-top : 1em;
  border-top  : 1px solid var(--edge-color);
  font-size   : 0.85em;
  color       : var(--muted-color);
}

div.buttons
{
  display   : flex;
  flex-wrap : wrap;
  gap       : 4px;
  margin    : 2em 0 2em 0;
}

div.buttons img
{
  display         : block;
  image-rendering : pixelated;
}

.masthead
{
  font-size        : 1.5em;
  font-style       : italic;
  font-weight      : bold;
  transform        : skewX(-8deg);
  transform-origin : bottom left;
  margin-bottom    : 0.25em;
}

nav
{
  margin-bottom  : 2em;
  padding-bottom : 1em;
  border-bottom  : 1px solid var(--edge-color);
  font-size      : 0.85em;
}

nav a
{
  margin-right : 1.5em;
}

nav button
{
  font             : inherit;
  color            : var(--hyperlink-color);
  text-decoration  : underline;
  background-color : rgba(0,0,0,0.0);
  border           : none;
  padding          : 0;
  cursor           : pointer;
}

nav button:empty
{
  display : none;
}

#TOC li
{
  list-style-type : none;
}

#TOC ul
{
  padding-left : 1.3em;
}

#TOC > ul
{
  padding-left : 0;
}

#TOC a:not(:hover)
{
  text-decoration : none;
}

code
{
  white-space : pre-wrap;
}

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

div.columns
{
  display : flex;
  gap     : min(4vw, 1.5em);
}

div.column
{
  flex       : auto;
  overflow-x : auto;
}

div.hanging-indent
{
  margin-left : 1.5em;
  text-indent : -1.5em;
}

ul.task-list[class]
{
  list-style-type : none;
}

ul.task-list li input[type='checkbox']
{
  font-size      : inherit;
  width          : 0.8em;
  margin         : 0 0.8em 0.2em -1.6em;
  vertical-align : middle;
}

.display.math
{
  display    : block;
  text-align : center;
  margin     : 0.5rem auto;
}

@media screen and (max-width: 600px)
{

body
{
  font-size : 0.9em;
  padding   : 12px 12px 12px 12px;
}

h1
{
  font-size : 1.8em;
}

}
@media print
{

html
{
  background-color : #ffffff;
}

body
{
  background-color : rgba(0,0,0,0.0);
  color            : #000000;
  font-size        : 12pt;
}

p
{
  orphans : 3;
  widows  : 3;
}

h2
{
  orphans : 3;
  widows  : 3;
}

h3
{
  orphans : 3;
  widows  : 3;
}

h2
{
  page-break-after : avoid;
}

h3
{
  page-break-after : avoid;
}

h4
{
  page-break-after : avoid;
}

}

/* Generated with Clay, http://fvisser.nl/clay */