:root {
	--bg: #111;
	--fg: #eee;
	--border: #444;
	--border-fix: #4442;
	--footer: #999;
	--bg-gradient: linear-gradient(60deg, rgba(18,35,65,1) 0%, rgba(14,41,66,1) 50%, rgba(56,10,65,1) 100%);
	--text-gradient: linear-gradient(60deg, rgba(172, 113, 255, .33)0, rgba(0, 179, 245, .33) 100%);
	--text-gradient2: linear-gradient(60deg, rgba(58, 200, 29, 0.51)0, rgba(199, 107, 41, 0.64) 100%);
}

body, html {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	font-weight: 400;
}

a, body {
	color: var(--fg);
}

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

strong, b, h1, h2, h3, h4, h5, h6, header {
	font-weight: 600;
}

main {
	font-size: 1em;
	margin: 0 auto;
	max-width: 800pt;
}

header, h1 {
	font-size: 1.7em;
}

h2 {
	font-size: 1.5em;
	font-weight: 400;
}

h3 {
	font-size: 1.2em;
	font-weight: 400;
}

h4 {
	font-size: 1.1em;
	font-weight: 400;
}

h5 {
	font-size: 1.1em;
	font-weight: 100;
}

h6 {
	font-weight: 100;
}

header figure, header h1, .footnote-ref, .footnote li:target p, h1, h2, h3, h4, h5, h6 {
	clear: both;
}

header figure, header h1, .footnote-ref, .footnote li:target p, h1, h2, h3, h4, h5, h6 {
	background: var(--text-gradient) var(--fg);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	text-fill-color: transparent;
}

:not(pre) > code {
	background: var(--text-gradient2) var(--fg);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	text-fill-color: transparent;
}

body {
	background-image: var(--bg-gradient);
	background-attachment: fixed;
	background-size: 100vw 200vh;
}

@media print {
	nav, .toc {
		display: none;
	}

	footer .emoji, footer span {
		display: none;
	}
}

header figure {
	font-weight: 400;
	font-size: 20pt;
}

header figure span:not(.emoji) {
	display: block;
	font-size: 12pt;
	text-transform: uppercase;
	font-weight: 200;
	font-style: italic;
}

.emoji {
    -webkit-text-fill-color: white;
    -moz-text-fill-color: white;
    text-fill-color: white;
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

article ol, article ul {
	margin-left: 0;
}

nav {
	font-size: 14pt;
}

main > header, main > nav {
	margin-bottom: 6pt;
	padding-bottom: 6pt;
	border-bottom: 1pt dashed var(--border);
}

main > article > footer {
	margin-top: 6pt;
	padding-top: 6pt;
	border-top: 1pt dashed var(--border);
}

hr {
	margin: 6pt 0;
	border-bottom: 1pt dashed var(--border-fix);
	color: transparent;
}

main>* {
	padding: 0 15pt;
}

footer {
	font-size: 12pt;
}

footer, footer a {
	color: --footer;
}

footer img {
	height: 1.4em;
	vertical-align: text-top;
}

blockquote, figcaption, figure, footer, ol, p, table, td, th, tr, ul {
	margin-bottom: 1em;
}

article h1, article h2, article h3 {
	margin-left: -26pt;
	margin-bottom: .5em;
}

article h4, article h5, article h6 {
	margin-left: -13pt;
	margin-bottom: .5em;
}

ol ol, ol ul, ul ol, ul ul {
	margin-bottom: 0;
}

img {
	max-width: 800pt;
}

.codehilite, code, pre {
	padding: .5em;
	border-radius: .2em;
	font-family: monospace;
	line-break: anywhere;
}

code {
	font-style: italic;
	font-weight: 600;
	padding: .2em;
	font-size: 1.2em;
}

.codehilite code, .codehilite pre {
	margin: 0;
	padding: 0;
	border-radius: 0;
	font-style: normal;
	font-weight: 400;
	overflow: scroll hidden;
}

.footnote-ref {
	font-size: 0.75em;
	text-decoration: none;
	padding: 0 5pt;
	font-style: italic;
}

.footnote-ref::before {
	content: '[';
}

.footnote-ref::after {
	content: ']';
}

.footnote {
	font-size: 0.6em;
	font-style: italic;
}

.footnote li {
	list-style: unset;
}

.footnote li:hover {
	list-style: unset;
}

.footnote p {
	margin: 0;
	padding: 0;
}

.footnote li:target, .footnote li:target p {
	font-size: 1.1em;
	font-weight: 600;
	font-style: normal;
}

header figure br:last-child {
	display: none;
}

@media (max-width:900pt), print {
	main {
		font-size: 0.8em;
	}

	article h1, article h2, article h3, article h4, article h5, article h6 {
		margin-left: 0;
	}

	p {
		margin-left: 26pt;
	}

	.codehilite, code, pre  {
		margin-left: 0;
	}

	header figure, header h1 {
		margin-bottom: 0;
	}

	footer, header, nav {
		text-align: center;
	}

	.footnote {
		font-size: 0.8em;
	}

	.footnote-ref {
		font-size: 1em;
	}
}

@media (prefers-color-scheme: light), print {
	:root {
		--fg: #000;
		--bg: #fff;
		--border: #ccc;
		--border-fix: #ddd;
		--footer: #999;
		--bg-gradient: unset;
	}
	
	header figure, header h1, .footnote-ref, .footnote li:target p, h1, h2, h3, h4, h5, h6, :not(pre) > code {
		background: unset;
		-webkit-background-clip: unset;
		-moz-background-clip: unset;
		background-clip: unset;
		-webkit-text-fill-color: unset;
		-moz-text-fill-color: unset;
		text-fill-color: unset;
	}

	body {
		background-image: unset;
		background-attachment: unset;
		background-size: unset;
	}
}

header h2 {
	margin: 0;
}

article > *:nth-child(6n+1)::selection, article > *:nth-child(6n+1) *::selection {
    background: rgba(204, 250, 158, 0.25);
}

article > *:nth-child(6n+2)::selection, article > *:nth-child(6n+2) *::selection {
    background: rgba(157, 236, 255, 0.25);
}

article > *:nth-child(6n+3)::selection, article > *:nth-child(6n+3) *::selection {
    background: rgba(212, 169, 255, 0.25);
}

article > *:nth-child(6n+4)::selection, article > *:nth-child(6n+4) *::selection, main header h1::selection {
    background: rgba(255, 150, 155, 0.25);
}

article > *:nth-child(6n+5)::selection, article > *:nth-child(6n+5) *::selection, main header figure::selection, main header figure *::selection {
    background: rgba(255, 190, 129, 0.25);
}

article > *:nth-child(6n+6)::selection, article > *:nth-child(6n+6) *::selection, main nav::selection, main nav *::selection {
    background: rgba(250, 244, 123, 0.25);
}

article.index > ol > li:nth-child(6n+1) a::selection{
    background: rgba(204, 250, 158, 0.25) !important;
}

article.index > ol > li:nth-child(6n+2) a::selection {
    background: rgba(157, 236, 255, 0.25) !important;
}

article.index > ol > li:nth-child(6n+3) a::selection {
    background: rgba(212, 169, 255, 0.25) !important;
}

article.index > ol > li:nth-child(6n+4) a::selection {
    background: rgba(255, 150, 155, 0.25) !important;
}

article.index > ol > li:nth-child(6n+5) a::selection {
    background: rgba(255, 190, 129, 0.25) !important;
}

article.index > ol > li:nth-child(6n+6) a::selection {
    background: rgba(250, 244, 123, 0.25) !important;
}

.footnote-backref {
	-webkit-text-fill-color: black;
}