@font-face {
    font-family: "fraunces";
    src: url( "../fonts/fraunces/Fraunces.woff2" ) format( "woff2" );
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: "fraunces";
    src: url( "../fonts/fraunces/Fraunces-Italic.woff2" ) format( "woff2" );
    font-style: italic;
}

:root {
    /* Font families */
    --serif: fraunces, iowan old style, georgia, verdana, system-ui;
    --sans: -apple-system, system-ui, "Segoe UI", Roboto, verdana, sans-serif;
    --mono: menlo, monospace;
    /* Font sizes */
    --font-size: 16px;
    --body-size: 18px;
    --code-size: 14px;
    --tag-size: 12px;
    /* Font colours */
    --font-colour: #272727;
    --font-colour-lighter: #919191;
    --font-colour-selection: #FBFBFB;
    --font-code-colour: #5D5D5D;
    --title-colour: #4D4D4D;
    --small-title-colour: #292929;
    --link-colour: #009CD9;
    --absent: #EB4B3F;
    --mark: #DC6122;
    --blockquote-colour: #4D4D4D;
    --tag-colour-1: #EB4B3F;
    --tag-colour-2: #ECA440;
    --tag-colour-3: #00990F;
    --tag-colour-4: #603DA8;
    /* Background colours */
    --bck-colour: #FFF;
    --table-bck-alt: rgba( 88, 110, 117, 0.1);
    --table-bck: rgba( 78, 40, 154, 0.1);
    --highlight-colour: #E6E6E6;
    --selection-colour: #0265D9;
    --sidebar-background-colour: #F6F6F6;
    --sidebar-list-background-colour: #FFFFFF;
    --sidebar-list-background-colour-alt: #F4F5F5; 
    --lightbox-bck-colour: rgba( 255, 255, 255, 0.8 );
    --searchbar-colour: #F2F2F2;
    /* Border colours */
    --primary-border-colour: #CFCFCF;
    --secondary-border-colour: #DCDCDC;
    --border-style: 1px solid;
    --hr: #93A1A1;
    /* Button colours */
    --btn-colour: #797979;
    --btn-inactive-colour: #C0C0C0;
    --btn-active-colour: #4D4D4D;
    /* Misc colours */
    --light-box-shadow: #BBB;
    /* Dimensions */
    --sidebar-width: 200px;
    --second-sidebar-width: 300px;
    --sidebar-list-padding: 5px;
    --list-padding: 2.5px;
    --sidebar-indent: 22px;
    --window-padding: 10px;
    --corner-radius: 5px;
    --btn-default-size: 12px;
    --max-width: 35em;
    /* Code highlighting colours */
    --ch-alert: var( --Syn_Light_Yellow );
    --ch-annotation: var( --Syn_Light_Magenta );
    --ch-attribute: var( --Syn_Light_Blue );
    --ch-base: var( --Syn_Light_Yellow );
    --ch-builtin: var( --Syn_Light_Text_Colour );
    --ch-char: var( --Syn_Light_Orange );
    --ch-comment-var: var( --Syn_Light_Slate_Grey );
    --ch-comment: var( --Syn_Light_Grey );
    --ch-constant: var( --Syn_Light_Blue );
    --ch-controlflow: var( --Syn_Light_Yellow );
    --ch-datatype: var( --Syn_Light_Bold_Italic );
    --ch-decval: var( --Syn_Light_Orange );
    --ch-documentation: var( --Syn_Light_Slate_Grey );
    --ch-error: var( --Syn_Light_Red );
    --ch-extension: var( --Syn_Light_Text_Colour );
    --ch-float: var( --Syn_Light_Blue );
    --ch-function: var( --Syn_Light_Magenta );
    --ch-import: var( --Syn_Light_Purple );
    --ch-info: var( --Syn_Light_Yellow );
    --ch-keyword: var( --Syn_Light_Purple );
    --ch-normal: var( --Syn_Light_Text_Colour ); 
    --ch-operator: var( --Syn_Light_Slate_Grey );
    --ch-other: var( --Syn_Light_Text_Colour );
    --ch-prep: var( --Syn_Light_Magenta );
    --ch-region-bck: var( --Syn_Light_Mauve );
    --ch-region: var( --Syn_Light_Strong_Purple );
    --ch-special-char: var( --Syn_Light_Blue );
    --ch-special-string: var( --Syn_Light_Orange );
    --ch-string: var( --Syn_Light_Green );
    --ch-variable: var( --Syn_Light_Strong_Purple );
    --ch-verbatim: var( --Syn_Light_Green );
    --ch-warning: var( --Syn_Light_Orange );
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Font colours */
        --font-colour: #DDDDDD;
        --font-colour-lighter: #666666;
        --font-colour-selection: #DDDDDD;
        --font-code-colour: #C0C0C0;
        --title-colour: #E9E9E9;
        --small-title-colour: #DDDDDD;
        --link-colour: #71A3B4;
        --blockquote-colour: #C0C0C0;
        --tag-colour-4: #8866DD;
        /* Background colours */
        --bck-colour: #1E1E1E;
        --selection-colour: #035AC9;
        --highlight-colour: #343434;
        --sidebar-background-colour: #262626;
        --sidebar-list-background-colour: #1E1E1E;
        --sidebar-list-background-colour-alt: #292929; 
        --lightbox-bck-colour: rgba( 0, 0, 0, 0.8 );
        --table-bck: rgba( 78, 40, 154, 0.3);
        --searchbar-colour: #383838;
        /* Border colours */
        --primary-border-colour: #000000;
        --secondary-border-colour: #101010;
        /* Button colours */
        --btn-colour: #969696;
        --btn-inactive-colour: #494949;
        --btn-active-colour: #A6A6A6;
        /* Misc colours */
        --light-box-shadow: #BBB;
        /* Code highlighting colours */
        --ch-alert: var( --Syn_Dark_Yellow );
        --ch-annotation: var( --Syn_Dark_Magenta );
        --ch-attribute: var( --Syn_Dark_Blue );
        --ch-base: var( --Syn_Dark_Yellow );
        --ch-builtin: var( --Syn_Dark_Text_Colour );
        --ch-char: var( --Syn_Dark_Orange );
        --ch-comment-var: var( --Syn_Dark_Slate_Grey );
        --ch-comment: var( --Syn_Dark_Grey );
        --ch-constant: var( --Syn_Dark_Blue );
        --ch-controlflow: var( --Syn_Dark_Yellow );
        --ch-datatype: var( --Syn_Dark_Bold_Italic );
        --ch-decval: var( --Syn_Dark_Orange );
        --ch-documentation: var( --Syn_Dark_Slate_Grey );
        --ch-error: var( --Syn_Dark_Red );
        --ch-extension: var( --Syn_Dark_Text_Colour );
        --ch-float: var( --Syn_Dark_Blue );
        --ch-function: var( --Syn_Dark_Magenta );
        --ch-import: var( --Syn_Dark_Purple );
        --ch-info: var( --Syn_Dark_Yellow );
        --ch-keyword: var( --Syn_Dark_Purple );
        --ch-normal: var( --Syn_Dark_Text_Colour ); 
        --ch-operator: var( --Syn_Dark_Slate_Grey );
        --ch-other: var( --Syn_Dark_Text_Colour );
        --ch-prep: var( --Syn_Dark_Magenta );
        --ch-region-bck: var( --Syn_Dark_Mauve );
        --ch-region: var( --Syn_Dark_Strong_Purple );
        --ch-special-char: var( --Syn_Dark_Blue );
        --ch-special-string: var( --Syn_Dark_Orange );
        --ch-string: var( --Syn_Dark_Green );
        --ch-variable: var( --Syn_Dark_Strong_Purple );
        --ch-verbatim: var( --Syn_Dark_Green );
        --ch-warning: var( --Syn_Dark_Orange );
    }
}

html, body {
    padding : 0;
    margin : 0;
    background-color: var(--bck-colour);
    color: var(--font-colour);
}

body {
    font-family: var(--serif);
    font-size: var( --font-size );
    line-height: 1.6;
    position: relative;
    border-top: var( --border-style ) var( --primary-border-colour );
}

canvas { border-radius: var( --corner-radius ); }

button { 
    width: var( --btn-default-size );
    height: var( --btn-default-size );
    mask-size: cover;
    -webkit-mask-size: cover;
    border: none;
    background-color: var( --btn-colour );
    margin: 0 var( --sidebar-list-padding );
    cursor: pointer;
    padding: 1px; /* ios buttons */
    /* vertical-align: middle; */
}

button[disabled] {
    background-color: var( --btn-inactive-colour ) !important;
    pointer-events: none;
}

a { 
    color: var(--link-colour);
    text-decoration: none;
    border-bottom: var( --border-style ) var(--link-colour);
}
a > strong, a > em { color : var(--link-colour); }
a.absent { 
    color: var(--absent);
    border-color: var(--absent);
}
a.anchor {
  display: block;
  padding-left: 1.875em;
  margin-left: -1.875em;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; 
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: var( --window-pane );
    padding: 0;
    cursor: text;
    position: relative; 
    font-variation-settings: "WONK" 1;
}

#content_pane :is( h2, h3, h4, h5, h6 ){
    margin: var( --font-size ) 0;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
    color : inherit;
    border : none;
}

h1 > a > strong, h1 > a > em,
h2 > a > strong, h2 > a > em,
h3 > a > strong, h3 > a > em,
h4 > a > strong, h4 > a > em,
h5 > a > strong, h5 > a > em,
h6 > a > strong, h6 > a > em {
    color : inherit;
}

h1 > a:after,
h2 > a:after, 
h3 > a:after,
h4 > a:after,
h5 > a:after,
h6 > a:after {
    content : "";
    display : inline-block;
    margin-left: var( --window-padding );
    vertical-align: middle;
    mask-image: url( ../icons/arrowshape.turn.up.right.svg );
    -webkit-mask-image: url( ../icons/arrowshape.turn.up.right.svg );
    mask-size: cover;
    -webkit-mask-size: cover;
    width: var( --btn-default-size );
    height: 11px;
    background-color: var( --font-code-colour );
    margin-top: -6px;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt h5 code, h6 tt, h6 code {
  font-size: inherit; 
}

h1 { color: var(--title-colour); font-weight: 600;}
h2 { color: var(--title-colour); font-weight: 600; }
h3 { color: var(--title-colour); font-weight: 500; font-size: 19px; }
h4 { color: var(--title-colour); font-weight: 400; font-size: var( --body-size ); }
h5 { color: var(--title-colour); font-weight: 400; font-size: var( --body-size ); }
h6 { color: var(--title-colour); font-weight: 400; font-size: var( --body-size ); }

li p.first { display: inline-block; }
p { font-size: var( --body-size ); }
bold, strong { 
    font-weight: 500;
}
em, italic {
    font-weight: 200;
}

ol li { list-style : none; }
ul, ol { padding: 0; margin: 0; }
ul, ol { list-style-type: none; }
ul li:not( .tag_item ), ol li { padding: var( --sidebar-list-padding ); padding-left: var( --sidebar-indent ); }
ul li:not( .tag_item ):before {
    content: "•";
    display: inline-block;
    color: var( --tag-colour-1 );
    vertical-align: middle;
    margin-right: var( --window-padding );
    margin-top: -6px;
}

ol { counter-reset: test; }
ol li:before { 
    counter-increment: test;
    content: counter( test )"."; 
    display: inline-block;
    color: var( --font-colour );
    font-weight: 300;
    font-family: var( --sans );
    font-size: var( --tag-size );
    vertical-align: text-bottom;
    margin-right: var( --window-padding );
    margin-top: 0;
}

#content_pane ul, #content_pane ol { font-size: var( --body-size ); }

ul li:not( .tag_item ):nth-child( 4n + 2 ):before {
    color: var( --tag-colour-2 );
}
ul li:not( .tag_item ):nth-child( 4n + 3 ):before {
    color: var( --tag-colour-3 );
}
ul li:not( .tag_item ):nth-child( 4n + 4 ):before {
    color: var( --tag-colour-4 );
}

hr {
  border: 0 none;
  height: 4px;
  border-bottom: var( --border-style ) var(--hr);
}

dl dt { font-weight: bold; }
dl dt:first-child { padding: 0; }
dl dt > :first-child { margin-top: 0; }
dl dt > :last-child { margin-bottom: 0; }
dl dd {}
dl dd > :first-child { margin-top: 0; }
dl dd > :last-child { margin-bottom: 0; }

blockquote {
  padding: 0 1.5em;
  font-size: var( --font-size );
  font-style: italic;
  color: var(--blockquote-colour);
}
blockquote p { font-size: var( --font-size ); }
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }

.table_container {
    max-width: 100%;
    overflow-y: scroll;
    overscroll-behavior: contain;
}

table {
  padding: 0;
  border-collapse: collapse; 
  margin: var( --font-size ) auto;
  font-family: var( --sans );
  position: relative;
}
table:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: var( --border-style ) var( --primary-border-colour );
    border-radius: var( --corner-radius );
    pointer-events: none;
}
table tr {
    margin: 0;
    padding: 0;
}
table .even { background-color: var(--table-bck-alt); }
table tr th {
  font-weight: 600;
  border-right: var( --border-style ) var( --primary-border-colour);
  border-bottom: var( --border-style ) var( --primary-border-colour);
  margin: 0;
  padding: 0.375em 0.8125em;
  background-color: var(--table-bck);
}
table tr th:last-child { border-right: none; }
table tr th:first-child { border-top-left-radius: var( --corner-radius ); }
table tr th:last-child { border-top-right-radius: var( --corner-radius ); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var( --corner-radius ); }
tbody tr:last-child td:last-child { border-bottom-right-radius: var( --corner-radius ); }
table tr td {
  border-right: var( --border-style ) var(--secondary-border-colour);
  border-bottom: var( --border-style ) var(--secondary-border-colour);
  margin: 0;
  padding: 0.375em 0.8125em; 
}
tbody tr td:last-child { border-right: 0; }
tbody tr:last-child td { border-bottom: 0; }

img { cursor: pointer; max-width: 100%; border-radius: var( --corner-radius ); }
video { max-width: 100%; }
figure { position: relative; text-align: center; }
figcaption {
    width: 100%;
    font-family: var(--sans);
    font-size: var( --tag-size );
}

div.line-block { white-space: pre-line; }
div.column { display: inline-block; vertical-align: top; width: 50%; }
span.smallcaps { font-variant: small-caps; }
span.underline { text-decoration: underline; }
span.frame {
  display: block;
  overflow: hidden; 
}
span.frame > span {
    border: var( --border-style ) var( --secondary-border-colour );
    display: block;
    float: left;
    overflow: hidden;
    margin: var( --window-padding ) 0 0;
    padding: var( --sidebar-list-padding );
    width: auto;
}
span.frame span img {
    display: block;
    float: left;
}
span.frame span span {
    clear: both;
    color: var( --sidebar-background-colour );
    display: block;
    padding: var( --sidebar-list-padding ) 0 0;
}
span.align-center {
    display: block;
    overflow: hidden;
    clear: both;
}
span.align-center > span {
    display: block;
    overflow: hidden;
    margin: var( --window-padding ) auto 0;
    text-align: center;
}
span.align-center span img {
    margin: 0 auto;
    text-align: center;
}
span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}
span.align-right > span {
    display: block;
    overflow: hidden;
    margin: var( --window-padding ) 0 0;
    text-align: right;
}
span.align-right span img {
    margin: 0;
    text-align: right;
}
span.float-left {
  display: block;
  margin-right: var( --window-padding );
  overflow: hidden;
  float: left;
}
span.float-left span { margin: var( --window-padding ) 0 0; }
span.float-right {
  display: block;
  margin-left: var( --window-padding );
  overflow: hidden;
  float: right; 
}
span.float-right > span {
    display: block;
    overflow: hidden;
    margin: var( --window-padding ) auto 0;
    text-align: right;
}

code, tt {
  padding: 0 var( --list-padding );
  white-space: pre-wrap;
  border-radius : var( --corner-radius );
  font-size: var( --code-size );
  font-family: var( --mono );
  color: var( --font-code-colour );
}

pre, pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
  font-size: var( --code-size );
  font-family: var( --mono );
}

pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
div.sourceCode { margin: var( --font-size ) 0; overflow: auto; overscroll-behavior: contain; }
pre.sourceCode { margin: 0; background-color: var( --ch-bck-colour ); }
pre.numberSource code { counter-reset: source-line 0; }
pre.numberSource code > span { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before { 
    content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 var( --sidebar-list-padding ); width: 4em;
    background-color: var( --bck-colour );
    color: var( --font-colour-lighter );
}
pre.numberSource { margin-left: 3em; border-left: var( --border-style ) var( --secondary-border-colour );  padding-left: var( --sidebar-list-padding ); }
div.sourceCode { color: var( --ch-normal ); background-color: var( --bck-colour ); }
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
code span { color: var( --ch-normal ); } /* Normal */
code span.al { color: var( --ch-alert ); font-style: italic; font-weight: bold; } /* Alert */
code span.an { color: var( --ch-annotation ); } /* Annotation */
code span.at { color: var( --ch-attribute ); } /* Attribute */
code span.bn { color: var( --ch-base ); } /* BaseN */
code span.bu { color: var( --ch-builtin ); font-weight: bold; } /* BuiltIn */
code span.cf { color: var( --ch-controlflow ); font-weight: bold; } /* ControlFlow */
code span.ch { color: var( --ch-char ); } /* Char */
code span.cn { color: var( --ch-constant ); } /* Constant */
code span.co { color: var( --ch-comment ); } /* Comment */
code span.cv { color: var( --ch-comment-var ); } /* CommentVar */
code span.do { color: var( --ch-documentation ); } /* Documentation */
code span.dt { color: var( --ch-datatype ); } /* DataType */
code span.dv { color: var( --ch-decval ); } /* DecVal */
code span.er { color: var( --ch-error ); text-decoration: underline; } /* Error */
code span.ex { color: var( --ch-extension ); } /* Extension */
code span.fl { color: var( --ch-float ); } /* Float */
code span.fu { color: var( --ch-function ); } /* Function */
code span.im { color: var( --ch-import ); } /* Import */
code span.in { color: var( --ch-info ); } /* Information */
code span.kw { color: var( --ch-keyword ); font-weight: bold; } /* Keyword */
code span.op { color: var( --ch-operator ); } /* Operator */
code span.ot { color: var( --ch-other ); } /* Other */
code span.pp { color: var( --ch-prep ); } /* Preprocessor */
code span.re { color: var( --ch-region ); background-color: var( --ch-region-bck ); } /* RegionMarker */
code span.sc { color: var( --ch-special-char ); } /* SpecialChar */
code span.ss { color: var( --ch-special-string ); } /* SpecialString */
code span.st { color: var( --ch-string ); } /* String */
code span.va { color: var( --ch-variable ); } /* Variable */
code span.vs { color: var( --ch-verbatim ); } /* VerbatimString */
code span.wa { color: var( --ch-warning ); } /* Warning */

.highlight pre {
  background-color: var(--pre-highlight);
}

pre {
  /* overflow: auto; */
  overscroll-behavior: contain;
}
pre code, pre tt {
    background-color: transparent;
    border: none;
}

sup {
    font-size: var( --tag-size );
    vertical-align: super;
    line-height: 0;
}

kbd {
  display: inline-block;
  padding: var( --sidebar-list-padding );
  font-size: var( --font-size );
  color: var( --bck-colour );
  vertical-align: middle;
  background-color: var( --sidebar-background-colour );
  border: var( --border-style ) var( --secondar-border-colour );
  border-radius: var( --corner-radius );
  box-shadow: inset 0 -1px 0 var(--light-box-shadow);
}

mark {
    background-color: var(--mark);
    padding: var( --sidebar-list-padding );
    border-radius: var( --corner-radius );
    color: var( --bck-colour );
}

a.sourceLine {
    border-bottom : none;
    color: var( --font-colour );
}

header, #note_lists, #toc {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var( --sidebar-width );
    padding: var( --sidebar-list-padding );
    border-right: var( --border-style ) var( --primary-border-colour );
    overflow: scroll;
    overscroll-behavior: contain;
    box-sizing: border-box;
    background-color: var( --bck-colour );
    font-variation-settings: "opsz" 9, "SOFT" 100, "WONK" 1;
    font-weight: 300;
    font-variant-numeric: oldstyle-nums;
    border-top: var( --border-style ) var( --primary-border-colour );
    z-index: 1;
}

#note_lists, #toc {
    left: var( --sidebar-width );
    width: var( --second-sidebar-width );
}

#toc { 
    display: none; 
    font-family: var( --sans );
    padding: 0 var( --window-padding );
}
#toc a > em, #toc a > italic, #toc a > bold, #toc a > strong {
    color: var( --font-colour );
}
#toc li { position: relative; padding: 0; }
#toc ul li:before { content: none; }

#toc ul li ul { 
    margin-left: var( --font-size );
    font-size: var( --code-size );
    border-left: var( --border-style ) var( --tag-colour-1);
    padding-left: var( --font-size );
}

#toc ul li ul li ul { display: none; }
#toc ul > li > ul > li:has( .expand_toc_btn.open ) > ul { display: block; }

#toc ul li ul li ul { border-color: var(--tag-colour-2); }
#toc ul li ul li ul li ul { border-color: var(--tag-colour-3);  }

#toc ul li ul li:before {
    content: "—";
    color: var( --tag-colour-1 );
    display: inline-block;
    margin-left: -17px;
    margin-right: var( --sidebar-list-padding );
}

#toc ul li ul li ul li:before { color: var(--tag-colour-2); }
#toc ul li ul li ul li ul li:before { color: var(--tag-colour-3); }

#toc a {
    border-bottom : none;
    color : var( --font-colour );
    padding: var( --list-padding );
    border-radius: var( --corner-radius );
}

.collapse_sidebars :is( header, #note_lists ) {
    display: none;
}

.collapse_sidebars.reveal_note_lists #note_lists {
    display: block;
    left: 0;
}

.collapse_sidebars.reveal_toc #toc { 
    display: block;
    left: 0;
}

.reveal_toc #toc {
    display: block;
}

.reveal_toc #note_lists { display: none; }

#toc_controls {
    position: fixed;
    top: 0;
    z-index: 3;
    right: calc( 100% - var( --sidebar-width ) - var( --second-sidebar-width ) + 1px );
    border-top: var( --border-style ) var( --secondary-border-colour );
    border-left: var( --border-style ) var( --secondary-border-colour );
    border-bottom: var( --border-style ) var( --secondary-border-colour );
    border-radius: var( --corner-radius ) 0 0 var( --corner-radius );
    background-color: var( --bck-colour );
}

.collapse_sidebars #toc_controls {
    width: 30px;
    left: 0;
    border-radius: 0;
    border-top-right-radius: var( --corner-radius );
    border-bottom-right-radius: var( --corner-radius );
    text-align: center;
    border-left: 0;
    border-right: var( --border-style ) var( --secondary-border-colour );
}

.collapse_sidebars.reveal_note_lists #toc_controls, .collapse_sidebars.reveal_toc #toc_controls {
    left: var( --second-sidebar-width );
}

.collapse_sidebars #toc_controls:before, .collapse_sidebars #toc_controls:after {
    width: 100%;
    height: 1px;
    left: 0;
    top: 26px;
}

.collapse_sidebars #toc_controls:after {
    top: 50px;
    left: 0;
}

#toc_controls:before, #toc_controls:after { 
    position: absolute;
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    left: 27px;
    background-color: var( --primary-border-colour );
}

#toc_controls:after {
    left: 51px;
    top: 0;
}

#note_list_btn {
    mask-image: url( ../icons/doc.text.svg );
    -webkit-mask-image: url( ../icons/doc.text.svg );
    width: 10px;
}

#toc_btn {
    mask-image: url( ../icons/list.bullet.svg );
    -webkit-mask-image: url( ../icons/list.bullet.svg );
    width: 16px;
}

.expand_toc_btn {
    background-color: transparent;
    font-size: var( --font-size );
    font-weight: 200;
}

#sidebar_btn { 
    mask-image: url( ../icons/sidebar.left.svg );
    -webkit-mask-image: url( ../icons/sidebar.left.svg );
    width: 16px;
}

#top_btn {
    mask-image: url( ../icons/arrow.up.svg );
    -webkit-mask-image: url( ../icons/arrow.up.svg );
    width: 10px;
    display: none;
}

header h1 { margin: 0; color: var( --title-colour ); font-weight: 700; }
#toc h2 { font-size: 27px; font-variant: all-petite-caps !important; }
header h1, header h3, #note_lists h2, #toc h2 {
    position: relative;
    font-family: var( --sans );
    font-variant: all-small-caps;
    font-variation-settings: "opsz" 9;
    margin-top: var( --sidebar-list-padding );
    margin-bottom: var( --sidebar-list-padding );
}

header h1:before, #tag_container h3:before, #note_lists h2:before {
    content: "";
    display: inline-block;
    width: var( --btn-default-size );
    height: var( --btn-default-size );
    mask-size: cover;
    -webkit-mask-size: cover;
    background-color: var( --font-code-colour );
    margin-left: var( --window-padding );
    margin-right: calc( var( --window-padding ) + 2px );
}

header h1:before {
    mask-image: url( ../icons/pencil.svg );
    -webkit-mask-image: url( ../icons/pencil.svg );
}
#tag_container h3:before {
    mask-image: url( ../icons/tag.svg );
    -webkit-mask-image: url( ../icons/tag.svg );
    mask-size: contain;
    -webkit-mask-size: contain;
}
#note_lists h2:before { 
    mask-image: url( ../icons/number.svg );
    -webkit-mask-image: url( ../icons/number.svg );
    width: 11px;
}

.external:after { 
    content: "";
    display: inline-block;
    width: var( --btn-default-size );
    height: 11px;
    background-color: var( --font-code-colour );
    mask-image: url( ../icons/arrowshape.turn.up.right.svg );
    -webkit-mask-image: url( ../icons/arrowshape.turn.up.right.svg );
    mask-size: cover;
    -webkit-mask-size: cover;
    margin: 0 var( --sidebar-list-padding );
}

#nav_categories{
    font-family: var( --sans );
    font-variant: all-small-caps;
    font-weight: 400
}
header a, #note_lists a:not(.cat_list_tag) { border: none; color: var( --font-colour ); }

.menu_item, .category_list_item {
    border-radius: var( --corner-radius );
    background-color: var( --sidebar-list-background-colour );
}

.category_list_item.active {
    background-color: var( --selection-colour ) !important;
}

.category_list_item.active > a:not( .cat_list_tag ) {
    color: var( --font-colour-selection ) !important;
}

.category_list_item.active > a:is( .cat_list_tag ) {
    background-color: var( --bck-colour );
}

.category_list_item.active > a:is( .tag_1 ) { color: var( --tag-colour-1 ); }
.category_list_item.active > a:is( .tag_2 ) { color: var( --tag-colour-2 ); }
.category_list_item.active > a:is( .tag_3 ) { color: var( --tag-colour-3 ); }
.category_list_item.active > a:is( .tag_4 ) { color: var( --tag-colour-4 ); }

.menu_item:nth-child( even ), .category_list_item:nth-child( even ) {
    background-color: var( --sidebar-list-background-colour-alt );
}

.menu_item:hover, .category_list_item:hover, #toc a:hover {
    background-color: var( --highlight-colour );
}

.top { font-size: var( --tag-size ); }
.hide { display: none; }
.show { display: block !important; }

.searchbar { 
    font-family : var( --sans ); 
    border : var( --border-style ) var( --primary-border-colour );
    background-color: var( --searchbar-colour );
    color: var(--font-colour);
    font-size: var( --tag-size );
    padding : var( --sidebar-list-padding );
    border-radius : var( --corner-radius );
    line-height : 1.5em;
    height : 2em;
    margin: var( --sidebar-list-padding ) 0;
    width: 175px;
    transition: box-shadow 0.3s ease;
}

.searchbar:focus { box-shadow: inset 0 1px 3px var( --transparent-black); }

.searchbar:outline { border: none; }

.tag_item, .cat_list_tag {
    display: inline;
}

.cat_list_tag { margin-left: var( --sidebar-list-padding ) !important; }

a[class*=tag_] {
    white-space: nowrap;
    border-radius: var( --corner-radius );
    border: var( --border-style ) transparent;
    padding: 0.1em 0.3em;
    font-size: var( --tag-size );
    margin: 0em 0.2em;
    vertical-align: text-bottom;
    font-family: var(--sans);
    font-weight: 400;
}

.tag_1 {
    border-color: var( --tag-colour-1 ) !important;
    color: var( --tag-colour-1 );
}
.tag_2 {
    border-color: var( --tag-colour-2 ) !important;
    color: var( --tag-colour-2 );
}
.tag_3 {
    border-color: var( --tag-colour-3 ) !important;
    color: var( --tag-colour-3 );
}
.tag_4 {
    border-color: var( --tag-colour-4 ) !important;
    color: var( --tag-colour-4 );
}

.tag_1:hover, .active.tag_item .tag_1 { background-color: var(--tag-colour-1); color: white; }
.tag_2:hover, .active.tag_item .tag_2 { background-color: var(--tag-colour-2); color: white; }
.tag_3:hover, .active.tag_item .tag_3 { background-color: var(--tag-colour-3); color: white; }
.tag_4:hover, .active.tag_item .tag_4 { background-color: var(--tag-colour-4); color: white; }

#clear_tag_selection, #close_lightbox_btn {
    mask-image: url( ../icons/xmark.circle.svg );
    -webkit-mask-image: url( ../icons/xmark.circle.svg );
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var( --absent );
}

#close_lightbox_btn { 
    position: fixed;
    top: var( --window-padding );
    right: var( --window-padding );
}

#content_pane { 
    margin-left: calc( var( --sidebar-width ) + var( --second-sidebar-width ));
    padding: var( --sidebar-list-padding ) calc( var( --window-padding ) * 3 );
    font-weight: 300;
    font-variation-settings: "opsz" 9, "SOFT" 100, "WONK" 0;
    font-variant-numeric: oldstyle-nums;
    max-width: var( --max-width );
}

.collapse_sidebars #content_pane {
    margin: 0 auto;
}

.collapse_sidebars.reveal_note_lists #content_pane, .collapse_sidebars.reveal_toc #content_pane {
    padding-left: calc( var( --second-sidebar-width ) + ( var( --window-padding ) * 3 ));
}

.loading {
    display: none;
    font-family: var( --sans );
    font-weight: 600;
    text-align: center;
    padding-top: 5em;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: calc( var( --sidebar-width ) + var( --second-sidebar-width ));
    z-index: 5;
    background-color: var( --lightbox-bck-colour );
}

.loading span {
    animation-name: blink;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.loading .tag_2 {
    animation-delay: 750ms;
}
.loading .tag_3 {
    animation-delay: 1125ms;
}
.loading .tag_4 {
    animation-delay: 1.5s;
}

@keyframes blink {
    from { opacity: 1; } to { opacity: 0; }
}

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var( --lightbox-bck-colour );
    z-index: 3;
    display: none;
    text-align: center;
    padding: calc( var( --window-padding ) * 2 );
}

#lightbox img { max-height: 100%; float: none; margin: 0 }

/* Media queries, not in tag whilst writing */

@media ( max-width: 950px ){
    body {
        max-width: var( --max-width );
        margin: 0 auto;
        border: none;
    }

    header, #note_lists, #toc, #content_pane {
        position: relative;
        border: none;
        width: 100%;
        left: 0;
    }

    #toc { display: block; }

    #nav_categories li { 
        display: inline; 
        background-color: var( --bck-colour ) !important;
        padding-left: 0;
    }

    #searchbar { width: 90%; display: block; margin: calc( var( --font-size ) / 2 ) auto; }

    #toc_controls {
        border: var( --border-style ) var( --secondary-border-colour );
        right: var( --window-padding );
        top: var( --window-padding );
        border-radius: var( --corner-radius );
    }
    #toc_controls:after { left: 45px; }
    #toc_controls:before { left: 21px; }

    #sidebar_btn { display: none; }
    #top_btn { display: inline-block; }

    #content_pane { 
        margin-left: 0; 
        box-sizing: border-box;
        padding: var( --window-padding );
    }

    #tag_container h3 { display: inline; }
    
    .loading {
        left: 0;
    }
}

@media ( max-width: 560px ){
    #nav_categories { font-size: var( --code-size ); }
    p { font-size: var( --font-size ); }
    #content_pane ul, #content_pane ol {
        font-size: var( --font-size );
    }
}

@media ( prefers-reduced-motion ){
    .loading span {
        animation: none;
    }
}

/* Syntax Highlighting */
/* Crisp Night */
:root {
    --Syn_Dark_Bold_Italic_Orig: #AFAFAF;
    --Syn_Dark_Popup_Colour_Orig: #222222;
    --Syn_Dark_Purple_Orig: #8C55FD;
    --Syn_Dark_Slate_Grey_Orig: #688088;
    --Syn_Dark_Text_Colour_Orig: #EFEFEF;
    --Syn_Dark_Background_Colour: #1A2124;
    --Syn_Dark_Black: #000000;
    --Syn_Dark_Blue: #44ACD5;
    --Syn_Dark_Bold_Italic: #D8D3D6;
    --Syn_Dark_Green: #4B9C53;
    --Syn_Dark_Grey: #A2B0B0;
    --Syn_Dark_Magenta: #D765B4;
    --Syn_Dark_Mauve: #7C86CE;
    --Syn_Dark_Orange: #F28750;
    --Syn_Dark_Pink: #ff6ca1;
    --Syn_Dark_Popup_Colour: #36474C;
    --Syn_Dark_Purple: #B88FF8;
    --Syn_Dark_Red: #F1786F;
    --Syn_Dark_Slate_Grey: #71A3B4;
    --Syn_Dark_Strong_Purple: #C9AEFF;
    --Syn_Dark_Text_Colour: #F5F1F4;
    --Syn_Dark_White: #feffff;
    --Syn_Dark_Yellow: #eca440;
}

/* Fresh Air Original */
:root {
    --Syn_Light_Bold_Italic_Orig: #444444;
    --Syn_Light_Text_Colour_Orig: #000000;
    --Syn_Light_Background_Colour: #FFFFFF;
    --Syn_Light_Bold_Italic: #5C4D78;
    --Syn_Light_Black: #000000;
    --Syn_Light_Blue: #268BD2;
    --Syn_Light_Green: #238C00;
    --Syn_Light_Grey: #93A1A1;
    --Syn_Light_Magenta: #CF019A;
    --Syn_Light_Mauve: #6C71C4;
    --Syn_Light_Orange: #CB4B16;
    --Syn_Light_Pink: #F94F92;
    --Syn_Light_Popup_Colour: #DDD8D8;
    --Syn_Light_Purple: #4E289A;
    --Syn_Light_Red: #DC322F;
    --Syn_Light_Slate_Grey: #586E75;
    --Syn_Light_Strong_Purple: #4E279A;
    --Syn_Light_Text_Colour: #251249;
    --Syn_Light_White: #feffff;
    --Syn_Light_Yellow: #eca440;
}