:root
{
	color-scheme: light dark;
	--padding: 30px;
	--small-padding: 15px;

	--light-background: #eee;
	--dark-background: #222;
	--light-shadow: #aaa;
	--dark-shadow: rgb(0 0 0 / 50%);
	--light-text: #111;
	--dark-text: #eee;
	--light-header: #f80;
	--dark-header: #f90;
	--light-link: #36f;
	--dark-link: #286db1;
	--error: rgb(127 0 0);

	--background-color: light-dark(var(--light-background), var(--dark-background));
	--shadow-color: light-dark(var(--light-shadow), var(--dark-shadow));
	--text-color: light-dark(var(--light-text), var(--dark-text));
	--header-color: light-dark(var(--light-header), hsl(from var(--dark-header) h calc(s - 20) l));
	--header-color--hover: rgb(from var(--header-color) calc(r - 51) calc(g - 51) calc(b - 51));
	--header-color-shadow: light-dark(white, var(--dark-shadow));
	--link-color: light-dark(
		rgb(from var(--light-link) calc(r - 34) calc(g - 34) calc(b - 34)),
		hsl(from rgb(from var(--dark-link) calc(r + 51) calc(g + 51) calc(b + 51)) h calc(s - 20) l)
	);
	--link-color--hover: rgb(from var(--link-color) calc(r + 51) calc(g + 51) calc(b + 51));
	--rule-color: rgb(from var(--background-color) calc(r + 17) calc(g + 17) calc(b + 17));
	--faint-border-color: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 10%));
	--faint-background-color: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 5%));
	--focus-color: light-dark(var(--light-text), var(--dark-text));

	--breadcrumb-link-color: hsl(from var(--header-color) h calc(s - 70) l);
	--breadcrumb-link-color--hover: hsl(from var(--header-color) h calc(s - 30) l);
	--control-text-color: light-dark(hsl(from var(--light-text) h s calc(l + 15)), hsl(from var(--dark-text) h s calc(l - 30)));
	--control-text-color--hover: light-dark(hsl(from var(--light-text) h s calc(l - 60)), hsl(from var(--dark-text) h s calc(l + 60)));
	--control-border-color: light-dark(rgb(0 0 0 / 20%), rgb(255 255 255 / 10%));
	--control-border-color--hover: light-dark(rgb(0 0 0 / 30%), rgb(255 255 255 / 20%));
	--control-background-color: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 5%));
	--control-background-color--hover: light-dark(rgb(0 0 0 / 15%), rgb(255 255 255 / 10%));
	--notes-text-color: light-dark(hsl(from var(--light-text) h s calc(l + 30)), hsl(from var(--dark-text) h s calc(l - 30)));

	--toolbar-background-color: light-dark(color-mix(in srgb, rgb(from var(--light-background) calc(r - 17) calc(g - 17) calc(b - 17)) 90%, transparent), color-mix(in srgb, rgb(from var(--dark-background) calc(r + 17) calc(g + 17) calc(b + 17)) 90%, transparent));
	--toolbar-background-color--hover: light-dark(rgb(from var(--light-background) calc(r - 17) calc(g - 17) calc(b - 17)), rgb(from var(--dark-background) calc(r + 17) calc(g + 17) calc(b + 17)));
	--toolbar-border-color: light-dark(rgb(from var(--light-background) calc(r - 85) calc(g - 85) calc(b - 85)), rgb(from var(--dark-background) calc(r + 68) calc(g + 68) calc(b + 68)));
	--toolbar-link-color: light-dark(hsl(from var(--light-text) h s calc(l + 35)), hsl(from var(--dark-text) h s calc(l - 25)));
	--toolbar-link-background-color--hover: light-dark(rgb(from var(--light-background) calc(r - 34) calc(g - 34) calc(b - 34)), rgb(from var(--dark-background) calc(r + 34) calc(g + 34) calc(b + 34)));
	--today-background-color: color-mix(in srgb, hsl(from var(--dark-header) h calc(s - 20) l) 25%, transparent);
	--today-background-color--hover: color-mix(in srgb, hsl(from var(--dark-header) h calc(s - 20) l) 35%, transparent);
	--banner-text-color: white;
	--banner-background-color: #006;
	--big-button-border-color: light-dark(hsl(from var(--light-background) h s calc(l - 25)), hsl(from var(--dark-background) h s calc(l + 10)));
	--big-button-background-color: light-dark(hsl(from var(--light-background) h s calc(l - 5)), hsl(from var(--dark-background) h s calc(l + 1)));
	--footer-text-color: light-dark(hsl(from var(--light-background) h s calc(l - 10)), hsl(from var(--dark-background) h s calc(l + 10)));
	--footer-link-color: light-dark(hsl(from var(--light-background) h s calc(l - 20)), hsl(from var(--dark-background) h s calc(l + 20)));
	--footer-link-color--hover: light-dark(hsl(from var(--light-background) h s calc(l - 40)), hsl(from var(--dark-background) h s calc(l + 40)));
	--image-background-color: light-dark(rgb(from var(--light-background) calc(r - 17) calc(g - 17) calc(b - 17)), hsl(from var(--dark-background) h s calc(l + 10)));
	--image-border-color: light-dark(rgb(from var(--light-background) calc(r + 17) calc(g + 17) calc(b + 17)), hsl(from var(--dark-background) h s calc(l + 25)));
	--box-background-color: light-dark(hsl(from var(--light-background) h s calc(l - 4)), hsl(from var(--dark-background) h s calc(l + 4)));
	--box-border-color: light-dark(hsl(from var(--light-background) h s calc(l - 15)), hsl(from var(--dark-background) h s calc(l + 15)));
	--error-box-background-color: light-dark(rgb(from var(--error) r g b / 15%), rgb(from var(--error) r g b / 30%));
	--error-box-border-color: rgb(from var(--error) r g b / 60%);
	--error-text-color: color-mix(in srgb, red 70%, var(--text-color));
}

body,
input,
textarea,
select
{
	font: 400 120%/1.5 'Open Sans', sans-serif;
}

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

body
{
	cursor: default;
	overflow-y: scroll;
}

#nprogress
{
	.bar { background-color: var(--header-color); }
	.peg { box-shadow: 0 0 10px var(--header-color), 0 0 5px var(--header-color); }
}

h1,h2,h3,h4
{
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
	margin-top: 0;
	margin-bottom: .5em;
	line-height: 1em;
	color: var(--header-color);
	text-shadow: var(--header-color-shadow) 0 0 5px;

	a, a:hover, a:active { color: inherit; }
	&+* { margin-top: 0; }
}
h1+h2, h2+h3, h3+h4 { padding-top: 0; }
.subtitle { font-size: .6em; color: var(--text-color); }

#breadcrumbs
{
	font-size: .8em;
	a
	{
		display: inline-block;
		padding: .3em .5em;
		color: var(--breadcrumb-link-color);
		&:hover, &:active { color: var(--breadcrumb-link-color--hover); }
	}
	a:first-child { margin-left: -0.5em; }
	&+h1 { padding-top: 0; }
}

h1 a, h2 a, h3 a, h4 a, .listing li a { margin-right: .7em; }
b, strong { font-weight: 600; }

a
{
	text-decoration: none;
	color: var(--link-color);
	background: none;
	&:hover, &:active
	{
		color: var(--link-color--hover);
	}
}

@media screen
{
	/* Selectors are specific enough to beat normalize.css `a:active, a:hover { outline: 0 }`. */
	:focus-visible,
	a:hover:focus-visible,
	a:active:focus-visible
	{
		outline: 2px solid var(--focus-color);
		outline-offset: 2px;
	}
	:focus:not(:focus-visible) { outline: none; }
}

li.current>a, #bottom-bar a.current, a.current { color: var(--header-color); }
li.current>a:hover, li.current>a:active,
#bottom-bar a.current:hover, #bottom-bar a.current:active,
a.current:hover, a.current:active { color: var(--header-color--hover); }

svg
{
	vertical-align: baseline;
	height: .8em;
	width: .8em;
	fill: currentColor;
	stroke: none;
}
svg.graphics { height: auto; width: 100%; margin: 1em 0; }
p { margin: 1em 0; }
p.small { font-size: 70%; opacity: .5; }

table
{
	border-collapse: collapse;
	empty-cells: hide;
	min-width: 100%;
	overflow-x: auto;
	th, td
	{
		text-align: left;
		vertical-align: top;
		padding: .3em .5em;
		border-width: 1px;
		border-style: solid;
		border-color: var(--faint-border-color);
	}
	thead { background: var(--faint-background-color); }
	ul, ol { margin: 0; padding: 0; }
}

ul, ol
{
	padding-left: 2em;
	li { padding-left: .5em; }
	&.none
	{
		li { list-style: none; padding: 0; }
		&.center { padding-left: 0; }
	}
}
.questions ol, .facts ul { padding-left: 1em; }
ul > li { list-style: circle; }
ol.alpha li { list-style: lower-alpha; }

article
{
	position: relative;
	&:last-child { margin-bottom: 0; }
	&>*:first-child { margin-top: 0; }
	footer svg { height: 64px; width: 64px; }
	hr { margin-top: 0; width: 55px; }
}

label[for] { cursor: pointer; }
input[type=text], input[type=email], input[type=url], input[type=password],
input[type=number], input[type=tel], input[type=date], input[type=time],
input[type=search], select, textarea
{
	font-size: .9em;
	padding: .5em;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
	color: var(--control-text-color);
	border-color: var(--control-border-color);
	background: var(--control-background-color);
}
input[type=checkbox] { margin-right: .5em; }
button
{
	padding: .5em 1.5em;
	font-size: .9em;
	border-radius: 5px;
	color: var(--control-text-color);
	border-color: var(--control-border-color);
	background: var(--control-background-color);
	&:hover
	{
		color: var(--control-text-color--hover);
		border-color: var(--control-border-color--hover);
		background: var(--control-background-color--hover);
	}
}

.clear { clear: both; }
.notes
{
	field-sizing: content;
	min-height: 2lh;
	box-sizing: content-box;
	box-shadow: 0 0 5px var(--shadow-color);
}
.notes, .notes-print
{
	display: block;
	resize: none;
	font: normal 16px/22px "Comic Sans", "Comic Sans MS", sans-serif;
	font-style: italic;
	width: 100%;
	color: var(--notes-text-color);
	border-color: var(--faint-border-color);
	background-color: var(--faint-background-color);
	background-image: url("pencil.svg");
	background-repeat: no-repeat;
	background-size: 35px 35px;
	background-position: top .5em right .5em;
	@media screen and (prefers-color-scheme: light)
	{
		background-image: url("pencil-light.svg");
	}
}
.notes-print
{
	display: none;
	white-space: pre;
	white-space: pre-wrap;
	color: inherit;
}

span, a.ref, button.ref { white-space: nowrap; }
button.ref
{
	display: inline;
	background: none;
	border: none;
	color: var(--link-color);
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-size: inherit;
	&:hover, &:active { color: var(--link-color--hover); }
}

hr
{
	margin-top: 75px;
	margin-bottom: 0;
	height: 1px;
	border: 0;
	font-size: 0;
	color: var(--rule-color);
	background: var(--rule-color);
	box-shadow: 0 0 5px var(--shadow-color);
	@media only screen and (max-height: 400px) and (orientation: landscape)
	{
		margin-bottom: calc(15px * 2 + 24px);
	}
}
h1:not(:first-child), h2 { padding-top: calc(15px * 2 + 24px + 20px); }
@media only screen and (max-width: 650px)
{
	h1:not(:first-child), h2 { padding-top: calc(8px * 2 + 24px + 20px); }
}
@media only screen and (max-height: 400px) and (orientation: landscape)
{
	h2 { padding-top: 20px; }
}

.toolbar
{
	z-index: 10;
	text-align: center;
	position: fixed;
	overflow: hidden;
	border-block-width: 1px;
	border-block-style: solid;
	font-size: 20px;
	backdrop-filter: blur(5px);
	background: var(--toolbar-background-color);
	border-color: var(--toolbar-border-color);
	box-shadow: 0 0 15px var(--shadow-color);
	&:hover { background: var(--toolbar-background-color--hover); }
	a
	{
		display: inline-block;
		padding: 8px 13px;
		color: var(--toolbar-link-color);
		text-shadow: var(--shadow-color) 0 0 5px;
		/* Inset ring; an offset one would be clipped by the bar's `overflow: hidden`. */
		&:focus-visible { outline-offset: -2px; }
		&:hover, &:active
		{
			color: var(--text-color);
			background: var(--toolbar-link-background-color--hover);
		}
		@media only screen and (max-width: 650px)
		{
			padding-left: .5em;
			padding-right: .5em;
		}
	}
	@media only screen and (max-width: 650px)
	{
		font-size: 16px;
	}
}

#header
{
	position: sticky;
	top: -1px;
	text-align: left;
	font-size: 24px;
	padding: 0 calc(30px - 13px);
	nav
	{
		position: relative;
		@media only screen
		{
			width: 760px;
			margin-left: auto;
			margin-right: auto;
		}
		@media only screen and (max-width: 800px) { width: auto; }
		@media only screen and (max-height: 400px) and (orientation: landscape)
		{
			html:not(.nobar) & { margin-left: 0; }
		}
	}
	a
	{
		display: inline-block;
		@media only screen and (max-width: 650px)
		{
			padding-left: .5em;
			padding-right: .5em;
		}
	}
	#left-bar
	{
		a:hover, a:active { background: none; }
		span
		{
			font-size: .7em;
			a
			{
				padding-left: 7px;
				padding-right: 7px;
				@media only screen and (max-width: 650px)
				{
					padding: .5em 30px;
					margin: 0;
					display: block;
					font-size: 14px;
				}
			}
		}
	}
	#right-bar { position: absolute; top: 0px; right: 0px; }
	#menu-toggle
	{
		display: none;
		@media only screen and (max-width: 650px)
		{
			display: inline-block;
			svg { transition: transform 500ms; }
		}
	}
	a.current { color: var(--text-color); }
	a[href='today']
	{
		background-color: var(--today-background-color);
		&:hover, &:active { background-color: var(--today-background-color--hover); }
	}
	@media only screen and (max-width: 650px)
	{
		padding: 0 calc(var(--small-padding) - 13px);
		font-size: 16px;
		height: calc(8px * 2 + 24px);
		&.open
		{
			height: auto;
			#menu-toggle svg { transform: rotate(-180deg); }
		}
	}
	@media only screen and (max-height: 400px) and (orientation: landscape)
	{
		position: relative;
		html:not(.nobar) & { margin-left: 50px; }
	}
}

#banner
{
	--focus-color: var(--banner-text-color);
	text-align: left;
	color: var(--banner-text-color);
	background: var(--banner-background-color);
	backdrop-filter: blur(5px);
	padding: .25rem;
	font-size: medium;
	&[aria-hidden="true"] { display: none; }
	.banner { max-width: 700px; margin-inline: auto; }
	a { color: inherit; text-decoration: underline; }
}

#bottom-bar
{
	bottom: -1px;
	right: -1px;
	@media only screen and (max-width: 650px)
	{
		text-align: center;
		left: -1px;
		a { padding-left: 5px; padding-right: 5px; }
	}
	@media only screen and (max-height: 400px) and (orientation: landscape)
	{
		top: -1px;
		left: -1px;
		right: auto;
		width: 50px;
		line-height: .6em;
		text-align: right;
		a { padding-right: .5em; display: block; }
	}
}
html.nobar #bottom-bar { display: none; }

.big-button
{
	font-size: 1.5em;
	margin-bottom: 1em;
	padding: .6em 1.2em;
	display: inline-block;
	color: inherit;
	border: 1px solid var(--big-button-border-color);
	background-color: var(--big-button-background-color);
	svg { height: 1.7em; width: 1.7em; vertical-align: middle; }
	@media only screen and (max-width: 650px)
	{
		font-size: 1.1em;
		padding: .5em .8em;
	}
}

#content
{
	position: relative;
	padding: 20px var(--padding);
	&>h1:first-of-type { margin-top: 0; }
	p>ul, p>ol { margin-top: 0; }
	@media only screen
	{
		width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	@media only screen and (max-width: 800px) { width: auto; }
	@media only screen and (max-width: 650px)
	{
		padding: 10px var(--small-padding);
		.memory > p, .background > p { padding-left: 20px; }
	}
	@media only screen and (max-height: 400px) and (orientation: landscape)
	{
		padding-top: 20px;
		html:not(.nobar) & { margin-left: 55px; }
	}
}

#footer
{
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 20px var(--padding);
	font-size: 12px;
	background-size: 25px auto;
	background-position: center right 25px;
	color: var(--footer-text-color);
	a
	{
		color: var(--footer-link-color);
		&:hover, &:active { color: var(--footer-link-color--hover); }
	}
	@media only screen
	{
		width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	@media only screen and (max-width: 800px) { width: auto; }
	@media only screen and (max-width: 650px)
	{
		padding-left: var(--small-padding);
		padding-right: var(--small-padding);
		&>span:not(:first-child):before { content: '\A'; white-space: pre; }
	}
	@media only screen and (max-height: 400px) and (orientation: landscape)
	{
		html:not(.nobar) & { margin-left: 55px; }
	}
}

.listing li, .questions li, .facts li { margin-bottom: .6em; }
.listing
{
	li
	{
		line-height: 1em;
		ul { margin-top: .6em; }
		&.current>ul { display: block; }
		@media only screen and (max-width: 650px)
		{
			.subtitle { display: block; }
		}
	}
	&.quarters
	{
		.title:after { content: '\A'; white-space: pre; }
		&>li { list-style: none; }
	}
}

img
{
	float: left;
	vertical-align: middle;
	margin-right: 1em;
	padding: .5em;
	background: var(--image-background-color);
	border: 1px solid var(--image-border-color);
	box-shadow: 0 0 5px var(--shadow-color);
}
.credits img { margin-right: 1em; }
.center { text-align: center; }

.exercise, .summary, .facts, .box { margin-top: 1em; margin-bottom: 1em; }
.box
{
	padding: .7em 1.2em;
	margin-left: -1.2em;
	margin-right: -1.2em;
	margin-bottom: 1em;
	border-style: solid none;
	border-width: 1px 0;
	background-color: var(--box-background-color);
	border-color: var(--box-border-color);
	box-shadow: 0 0 5px var(--shadow-color);
	& *:first-child { margin-top: 0; }
	& *:last-child { margin-bottom: 0; }
	@media only screen and (max-width: 650px)
	{
		margin-left: calc(0px - var(--small-padding));
		margin-right: calc(0px - var(--small-padding));
		padding-left: var(--small-padding);
		padding-right: var(--small-padding);
	}
}
.box.error
{
	margin: 2em 2em;
	background-color: var(--error-box-background-color);
	border-color: var(--error-box-border-color);
}
#right-bar .error { color: var(--error-text-color) !important; }

.memory, .background
{
	h2
	{
		margin-bottom: 0;
		& + * { margin-top: 0; }
	}
	&>p { padding-left: 60px; }
}
.memory { font-style: italic; text-wrap: balance; }
#home .memory a { color: inherit; }
.credits { margin-top: 3em; }
.credits span { font-weight: 600; }

.exercise
{
	font-weight: 600;
	color: var(--text-color);
	li, .exercise
	{
		font-size: .9em;
		font-weight: 400;
		margin-left: 1.5em;
	}
	p:last-of-type { margin-bottom: .5em; }
	p:last-child { margin-bottom: 0; }
}
.action { color: var(--header-color); }
table .exercise, .exercise table .exercise { margin: 0; }
table.sunset
{
	width: 100%;
	thead th, td { text-align: right; }
}
h2+.about { margin-top: -14.4px; }
.day footer, .introduction footer
{
	&>* { vertical-align: middle; display: inline-block; margin-right: 1em; }
}
video, audio
{
	display: block;
	width: 100%;
	margin-bottom: 1em;
	background: var(--background-color);
}
video { box-shadow: 0 0 5px var(--shadow-color); }
dl
{
	dt { font-weight: bold; }
	dd+dt { margin-top: 1em; }
	dd
	{
		margin-left: 1.25em;
		&>p:first-child { margin-top: .25em; }
	}
}
q
{
	font-style: italic;
	&:before, &:after { content: ''; }
}
#disqus_thread { margin-top: 1em; }