:root {
	--col:               #000000;
	--body-bg-col:       #f0f0f0;
	--header-bg-col:     var(--main-bg-col);
	--header-a-col:      #808080;
	--header-a-hover-col:#404040;
	--header-border-col: #606060;
	--header-img-invert: 0;
	--aside-a-col:       var(--header-a-hover-col);
	--aside-a-hover-col: var(--col);
	--a-col:             #c00000;
	--main-bg-col:       #ffffff;
	--pre-bg-col:        var(--body-bg-col);
	--table-bg-col:      #e8e8e8;
	--td-bg-col:         var(--main-bg-col);
	--td-2n-bg-col:      var(--body-bg-col);
	--time-bg-col:       #d0d0d0;
	--tag-bg-col:        #50b050;
	--tag-col:           #ffffff;
	--tag-hover-col:     #000000;
	--note-bg-col:       var(--body-bg-col);
	--note-head-bg-col:  #a0c0e0;
	--warn-head-bg-col:  #e0c0a0;
	--hr-col:            #c0c0c0;
	--img-bg-col:        #ffffff;
}

@media screen and (prefers-color-scheme: dark) {

:root {
	--col:               #ffffff;
	--body-bg-col:       #202020;
	--main-bg-col:       #303030;
	--header-a-col:      #c0c0c0;
	--header-a-hover-col:#ffffff;
	--header-img-invert: 1;
	--tag-bg-col:        #208020;
	--tag-col:           inherit;
	--time-bg-col:       #404040;
	--a-col:             #e0c0d0;
	--note-head-bg-col:  #506070;
	--warn-head-bg-col:  #705060;
	--table-bg-col:      #606060;
	--aside-a-col:       var(--header-a-col);
	--hr-col:            #707070;
}

.highlight .kt { color:      #8899cc; } /* Keyword.Type */
.highlight .nc { color:      #8899cc; } /* Name.Class */
.highlight .c  { color:      #c03030; } /* Comment */
.highlight .cm { color:      #c03030; } /* Comment.Multiline */
.highlight .cp { color:      #c03030; } /* Comment.Preproc */
.highlight .c1 { color:      #c03030; } /* Comment.Single */
.highlight .cs { color:      #c03030; } /* Comment.Special */
.highlight .gd { color:      inherit; background-color: #804040; } /* Generic.Deleted */
.highlight .gi { color:      inherit; background-color: #408040; } /* Generic.Inserted */

} /* @media screen and (preferred-color-mode: dark) */

body {
	background:          var(--main-bg-col);
	color:               var(--col);
	margin:              0pt;
	padding:             0pt;
	overflow-y:          scroll;
}

header, body > footer, footer nav {
	display:             block;
}

main {
	padding:             0pt 15pt;
}

header {
	margin:              0pt;
	padding:             0pt;
	font-family:         sans-serif;
	font-variant:        small-caps;
	font-size:           0;
	line-height:         1;
	box-shadow:          0pt 0pt 3pt rgba(0,0,0,.5);
	border-bottom:       solid 3pt var(--header-border-col);
}

header a, footer a {
	text-decoration:     none;
	color:               var(--header-a-col);
	white-space:         nowrap;
	display:             inline-block;
}

header a:hover, footer a:hover {
	color:               var(--header-a-hover-col);
}

header a img {
	width:               24pt;
	height:              24pt;
}

header a img, footer a img {
	display:             inline-block;
	vertical-align:      middle;
	opacity:             .666;
	margin:              0pt;
	padding:             0pt;
	border:              0pt none;
	filter:              invert(var(--header-img-invert));
}

header a:hover img, footer a:hover img {
	opacity:             1;
}

header a:first-child img {
	opacity:             1;
	filter:              invert(0);
}

footer nav {
	float:               right;
}

footer nav a {
	padding:             0pt 0pt 0pt 15pt;
}

body > footer {
	padding:             0pt 15pt;
	border-top:          solid 2pt var(--header-border-col);
}

article a {
	color:               var(--a-col);
	text-decoration:     none;
}

article a[href*="://"]::after {
	content:             "□➟\02003";
	vertical-align:      super;
	font-size:           75%;
	letter-spacing:      -.5em;
}

article pre {
	margin:              15pt -15pt 15pt -15pt;
	padding:             0pt 15pt 0pt 14pt;
	border-right:        1pt solid var(--main-bg-col);
}

article pre, .details {
	background:          var(--pre-bg-col);
}

.details h2 {
	border-bottom:       1pt solid var(--hr-col);
}

article table {
	background:          var(--table-bg-col);
}

article td {
	background:          var(--td-bg-col);
}

article table tr:nth-child(2n) td {
	background:          var(--td-2n-bg-col);
}

article p img {
	background:          var(--img-bg-col);
}

time {
	position:            relative;
	border-radius:       0pt 2.5pt 0pt 2.5pt;
	background:          var(--time-bg-col);
	margin:              0pt 0pt 0pt -15pt;
}

.tag {
	background:          var(--tag-bg-col);
	color:               var(--tag-col);
}

.tag:hover {
	color:               var(--tag-hover-col);
}

.note {
	background:          var(--note-bg-col);
}

.note h4 {
	background:          var(--note-head-bg-col);
}

.warn h4 {
	background:          var(--warn-head-bg-col);
}

@media screen and (min-width: 120pt) {

header {
	position:            fixed;
	width:               100%;
	top:                 0pt;
	background:          var(--header-bg-col);
	z-index:             1;
	text-align:          right;
}

header a:first-child {
	float:               left;
}

main {
	padding:             25pt 15pt 1pt 15pt;
}

:target::before {
	display:             block;
	position:            relative;
	margin-top:          -37pt;
	height:              37pt;
	content:             "";
}

article > h2:target::after {
	content:             counter(section) ".";
	margin-right:        .5ex;
	float:               left;
}

article > h3:target::after {
	content:             counter(section) "." counter(subsection) ".";
	margin-right:        .5ex;
	float:               left;
}

} /* @media screen and (min-width: 120pt) */

@media screen and (min-width: 150pt) {

header {
	padding:             0pt 15pt;
}

} /* @media screen and (min-width: 150pt) */

@media screen and (min-width: 210pt) {

header {
	padding:             0pt 0pt 0pt 15pt;
}

header a {
	padding:             0pt 15pt 0pt 0pt;
}

} /* @media screen and (min-width: 210pt) */

@media screen and (min-width: 450pt) {

header a {
	font-size:           14pt;
}

header a:first-child {
	font-size:           0pt;
}

} /* @media screen and (min-width: 450pt) */

@media screen and (min-width: 525pt) {

header a:first-child {
	font-size:           14pt;
}

} /* @media screen and (min-width: 525pt) */

@media screen and (min-width: 750pt) {

header a img {
	margin:              8pt 0pt;
}

header a:first-child img {
	margin:              0pt;
	width:               40pt;
	height:              40pt;
}

main {
	padding:             43pt 15pt 1pt 15pt;
	min-height:          calc(100vh - 32pt);
}

footer {
	line-height:         30pt;
}

:target::before {
	margin-top:          -53pt;
	height:              53pt;
}

article img {
	max-height:          calc(100vh - 30pt - 32pt);
}

body {
	background:          var(--body-bg-col);
}

header {
	padding:             0pt 100pt;
}

main, body > footer {
	background:          var(--main-bg-col);
	margin:              0pt 100pt;
}

main > footer::after {
	content:             "\000a0";
}

main > aside {
	display:             block;
	position:            fixed;
	width:               100pt;
	padding:             0pt 5pt;
	font-size:           10pt;
}

main > aside a {
	display:             block;
	text-decoration:     none;
	color:               var(--aside-a-col);
}

main > aside a:hover {
	color:               var(--aside-a-hover-col);
}

main > aside h1 {
	margin:              15pt 0pt 0pt 0pt;
	font-size:           100%;
}

#left {
	left:                0pt;
}

#left ol, #left ul {
	font-size:           80%;
	padding-left:        2.5em;
}

#left ol ol {
	padding-left:        1.5em;
}

#left nav > ol, #left nav > ul {
	background:          var(--main-bg-col);
	margin:              0pt -5pt;
	overflow-y:          auto;
	max-height:          calc(100vh - 53pt - 2.17em);
}

#left nav > ol > li:first-child, #left nav > ol > li:last-child {
	list-style-type:     none;
	counter-reset:       section;
}

#left nav > ol > li {
	counter-increment:   section;
	content:             counter(section);
}

#right {
	right:               0pt;
}

#right nav {
	background:          var(--main-bg-col);
	border-radius:       0pt 5pt 5pt 0pt;
	padding:             5pt;
	margin:              0pt 0pt 0pt -5pt;
}

#right .tags {
	border:              0pt none;
	padding:             0pt;
	margin:              0pt 0pt 0pt -5pt;
	background:          none;
}

#right .tags a {
	margin:              5pt 0pt;
	display:             table;
	border-radius:       0pt 2.5pt 2.5pt 0pt;
	border-left:         0pt none;
	padding:             0pt 5pt;
}

main > article > .tags {
	display:             none;
}

time {
	margin:              0pt 0pt 0pt -20pt;
}

} /* @media screen and (min-width: 750pt) */

@media screen and (min-width: 850pt) {

header {
	padding:             0pt 150pt;
}

main, body > footer {
	margin:              0pt 150pt;
}

main > aside {
	width:               150pt;
}

#left ol, #left ul {
	font-size:           90%;
}

} /* @media screen and (min-width: 850pt) */