@import url("./main.css");
@import url("../fonts/noto-serif/*.css");
@import url("../fonts/oswald/*.css");
@import url("../fonts/roboto/*.css");
@import url("../fonts/ubuntu-mono/*.css");
/*~~~~~~ html, body ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html {
	display: grid;
	width: 100%;
	height: 100%;
	font-family: "Roboto";
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	overflow: clip;
}
body {
	--size: calc(min(100dvh, 100dvw) / 11.25);
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	display: grid;
	width: 100%;
	height: 100%;
	scrollbar-color: var(--context-foreground) var(--context-background-color);
	background-image:
		linear-gradient(150.6422deg, #0f0c, #00fc),
		repeating-linear-gradient(0deg, #0000 0 calc(var(--size) * 1), #f00 0 calc(var(--size) * 4), #0000 0 calc(var(--size) * 5)),
		repeating-linear-gradient(120deg, #0000 0 calc(var(--size) * 1), #f00 0 calc(var(--size) * 4), #0000 0 calc(var(--size) * 5)),
		repeating-linear-gradient(240deg, #0000 0 calc(var(--size) * 1), #f00 0 calc(var(--size) * 4), #0000 0 calc(var(--size) * 5)),
		linear-gradient(150.6422deg, #0f0, #00f);
	background-position: center;
	background-size:
		100dvw 100dvh,
		calc(var(--size) * 10 / 1.7321) calc(var(--size) * 10),
		calc(var(--size) * 10 / 1.7321) calc(var(--size) * 10),
		calc(var(--size) * 10 / 1.7321) calc(var(--size) * 10),
		100dvw 100dvh;
	overflow: auto;
}
body::-webkit-scrollbar {
	width: 1.2rem;
	height: 1.2rem;
	background-color: var(--context-background-color);
}
body::-webkit-scrollbar-thumb {
	border-radius: .6rem;
	background-color: var(--context-foreground);
}
/*~~~~~~ header, footer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
header,
footer {
	display: grid;
	padding: 1rem 0;
	background-image: var(--context-background-image);
	background-attachment: fixed;
	background-color: var(--context-background-color);
	color: var(--context-foreground);
	box-shadow: 0 0 .5rem var(--shadow);
}
header {
	grid-template-columns: [full-start] minmax(0, 1fr) [content-start main-start] 20rem [main-end side-start] minmax(0, 88rem) [side-end content-end] minmax(0, 1fr) [full-end];
	grid-auto-rows: auto;
}
footer {
	grid-template-columns: [full-start] minmax(0, 1fr) [content-start main-start] minmax(0, 88rem) [main-end side-start] 20rem [side-end content-end] minmax(0, 1fr) [full-end];
	grid-auto-rows: auto;
}
header > *,
footer > * {
	justify-self: stretch;
	align-self: center;
	grid-column: content;
	grid-row: 1 / -1;
	padding: 1rem;
}
header > hgroup,
footer > address {
	grid-column: main;
	text-align: left;
}
header > hgroup > h1 {
	display: inline-block;
}
header > hgroup > h1 > a:not([download]) {
	display: inline-grid;
	border-radius: 2rem;
	-webkit-user-select: none;
	user-select: none;
	box-shadow: 0 0 transparent;
	transition: background-color .2s, box-shadow .2s;
}
header > hgroup > h1 > a:not([download]):not(:hover):not(:focus-within) {
	text-decoration-color: transparent;
}
header > hgroup > h1 > a:not([download]):hover,
header > hgroup > h1 > a:not([download]):focus-within {
	background-color: var(--link-background);
	box-shadow: 0 0 0 .5rem var(--link-background);
}
header > hgroup > h1 > a:not([download]):active {
	background-color: transparent;
	box-shadow: 0 0 0 .5rem var(--link-background);
}
header > hgroup > h1 > a:not([download]) > picture {
	width: 100%;
	height: 4rem;
	margin: 0;
	background: none;
}
header > hgroup > h1 > a:not([download]) > picture > img {
	width: 17.2rem;
	height: 3.2rem;
	margin: .4rem;
}
footer > address > p > a:not([download]) {
	display: inline-block;
	padding: 0 1rem;
	line-height: 2.5;
	-webkit-user-select: none;
	user-select: none;
}
header > nav,
footer > nav {
	grid-column: side;
	text-align: right;
}
header > nav > p,
footer > nav > p {
	display: inline-block;
	margin: 0;
}
header > nav > p > a:not([download]),
footer > nav > p > a:not([download]) {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-auto-columns: auto;
	grid-auto-rows: 1fr;
	display: inline-grid;
	padding: 1rem;
	gap: 1rem;
	border-radius: 2rem;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	box-shadow: 0 0 transparent;
	transition: background-color .2s, box-shadow .2s;
}
header > nav > p > a:not([download]):not(:hover):not(:focus-within),
footer > nav > p > a:not([download]):not(:hover):not(:focus-within) {
	text-decoration-color: transparent;
}
header > nav > p:first-of-type > a:not([download]) {
	cursor: auto;
}
header > nav > p:first-of-type > a:not([download]):focus-within {
	outline-color: transparent;
}
header > nav > p:first-of-type ~ p > a:not([download])[tabindex="-1"],
footer > nav > p > a:not([download])[tabindex="-1"] {
	opacity: .4;
	pointer-events: none;
}
header > nav > p:first-of-type > a:not([download]):hover:not(:focus-within),
header > nav > p:first-of-type ~ p > a:not([download]):not([tabindex="-1"]):hover,
header > nav > p:first-of-type ~ p > a:not([download]):not([tabindex="-1"]):focus-within,
footer > nav > p > a:not([download]):not([tabindex="-1"]):hover,
footer > nav > p > a:not([download]):not([tabindex="-1"]):focus-within {
	background-color: var(--link-background);
	box-shadow: 0 0 0 .5rem var(--link-background);
}
header > nav > p:first-of-type > a:not([download]):active:not(:focus-within),
header > nav > p:first-of-type ~ p > a:not([download]):not([tabindex="-1"]):active,
footer > nav > p > a:not([download]):not([tabindex="-1"]):active {
	background-color: transparent;
	box-shadow: 0 0 0 .5rem var(--link-background);
}
header > nav > p > a:not([download])::after,
footer > nav > p > a:not([download])::after {
	content: "";
	order: -1;
	justify-self: center;
	align-self: center;
	grid-column: -3;
	grid-row: 1;
	width: 4rem;
	height: 4rem;
	margin: -1rem;
	border-radius: 2rem;
}
/*~~~~~~ main ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
main {
	grid-template-columns: [full-start] minmax(0, 1fr) [content-start] minmax(0, 88rem) [content-end] minmax(0, 1fr) [full-end];
	grid-auto-rows: auto;
	align-content: start;
	display: grid;
	padding: 1rem;
}
main > nav,
main > section,
main > article {
	grid-column: content;
	margin: 1rem;
	border-radius: .5rem;
	box-shadow: 0 0 .5rem var(--shadow);
}
main > section,
main > article {
	position: relative;
	background-image: var(--content-background-image);
	background-attachment: fixed;
	background-color: var(--content-background-color);
	color: var(--content-foreground);
}
main > section *,
main > article * {
	scroll-margin-top: 10rem;
}
main > nav {
	position: sticky;
	z-index: 2;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto;
	display: grid;
	inset: 0;
	background-image: var(--context-background-image);
	background-attachment: fixed;
	background-color: var(--context-background-color);
	color: var(--context-foreground);
}
main > nav > p,
main > nav > ol,
main > nav > ul {
	margin: 0;
	padding: 1rem;
}
main > nav > p > strong {
	line-height: 1;
	font-size: 2rem;
}
main > nav > ul > li {
	display: inline-block;
	margin: 0;
}
main > nav > ul > li::before {
	display: none;
}
main > nav > ul > li > p,
main > nav > ul > li > form {
	margin: 0;
}
main > nav > ul > li > form > p {
	width: 4rem;
	height: 4rem;
	margin: 0;
}
main > nav > p > strong,
main > nav > ul > li > p > a:not([download]),
main > nav > ul > li > form > p > a[download],
main > nav > ul > li > form > p > label {
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
}
main > nav > p > strong,
main > nav > ul > li > p > a:not([download]) {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-auto-columns: auto;
	grid-auto-rows: 1fr;
	display: inline-grid;
	padding: 1rem;
	gap: 1rem;
	border-radius: 2rem;
}
main > nav > ul > li > p > a:not([download]),
main > nav > ul > li > form > p > a[download],
main > nav > ul > li > form > p > label {
	gap: 0;
	font-size: 0;
	box-shadow: 0 0 transparent;
	transition: background-color .2s, box-shadow .2s;
}
main > nav > ul > li > p > a:not([download]):not(:hover):not(:focus-within),
main > nav > ul > li > form > p > a[download]:not(:hover):not(:focus-within),
main > nav > ul > li > form > p > label:not(:hover):not(:focus-within) {
	text-decoration-color: transparent;
}
main > nav > ul > li > p > a:not([download]):hover,
main > nav > ul > li > p > a:not([download]):focus-within,
main > nav > ul > li > form > p > a[download]:hover,
main > nav > ul > li > form > p > a[download]:focus-within,
main > nav > ul > li > form > p > label:hover,
main > nav > ul > li > form > p > label:focus-within {
	background-color: var(--link-background);
	box-shadow: 0 0 0 .5rem var(--link-background);
}
main > nav > ul > li > p > a:not([download]):active,
main > nav > ul > li > form > p > a[download]:active,
main > nav > ul > li > form > p > label:active {
	background-color: transparent;
	box-shadow: 0 0 0 .5rem var(--link-background);
}
main > nav > ul > li > form > p > a[download],
main > nav > ul > li > form > p > label {
	position: absolute;
	inset: 0;
	transition: width .2s, height .2s, margin .2s, border-radius .2s, background-color .2s, box-shadow .2s;
}
main > nav > ul > li > form > p > a[download]:not(:focus-within),
main > nav > ul > li > form > p > label:not(:focus-within) {
	width: 4rem;
	height: 4rem;
	margin: 1rem 1rem 1rem calc(100% - 5rem);
	border-radius: 2rem;
	cursor: pointer;
}
main > nav > ul > li > form > p > a[download]:focus-within,
main > nav > ul > li > form > p > label:focus-within {
	width: calc(100% - 2rem);
	height: 4rem;
	margin: 1rem;
	border-radius: .5rem;
}
main > nav > p > strong::after,
main > nav > ul > li > p > a:not([download])::after {
	content: "";
	order: -1;
	justify-self: center;
	align-self: center;
	grid-column: -3;
	grid-row: 1;
	width: 4rem;
	height: 4rem;
	margin: -1rem;
	border-radius: 2rem;
}
main > nav > ul > li > p > a:not([download])::after,
main > nav > ul > li > form > p > a[download]::before,
main > nav > ul > li > form > p > label > input:not([type="file"]),
main > nav > ul > li > form > p > label > input[type="file"]::before,
main > nav > ul > li > form > p > label > input[type="file"]::file-selector-button,
main > nav > ul > li > form > p > label > select,
main > nav > ul > li > form > p > label > textarea {
	font-size: 1.6rem;
}
main > nav > ul > li > form > p > a[download]::before,
main > nav > ul > li > form > p > label > input:not([type="file"]),
main > nav > ul > li > form > p > label > input[type="file"]::before,
main > nav > ul > li > form > p > label > input[type="file"]::file-selector-button,
main > nav > ul > li > form > p > label > select,
main > nav > ul > li > form > p > label > textarea {
	transition: padding .2s, border-radius .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
main > nav > ul > li > form > p > a[download]:not(:focus-within)::before,
main > nav > ul > li > form > p > label:not(:focus-within) > input:not([type="file"]),
main > nav > ul > li > form > p > label:not(:focus-within) > input[type="file"]::before,
main > nav > ul > li > form > p > label:not(:focus-within) > input[type="file"]::file-selector-button,
main > nav > ul > li > form > p > label:not(:focus-within) > select,
main > nav > ul > li > form > p > label:not(:focus-within) > textarea {
	padding: .8rem 0 .8rem 3.6rem;
	border-radius: 2rem;
	border: .2rem solid transparent;
	background-color: transparent;
	cursor: pointer;
	box-shadow: 0 0 transparent;
}
/*~~~~~~ h1, h2, h3, h4, h5, h6 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Oswald";
	font-variant-caps: small-caps;
}
/*~~~~~~ blockquote, q ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
blockquote,
q {
	font-family: "Noto Serif";
}
/*~~~~~~ pre, code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
pre,
code {
	font-family: "Ubuntu Mono";
}
/*~~~~~~ @media ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (min-width: 67.5em) {
	header > nav > p:first-of-type {
		display: none;
	}
}
@media (max-width: 67.4375em) {
	header,
	footer {
		padding: 0;
	}
	header > hgroup {
		position: fixed;
		z-index: 4;
		align-self: start;
		width: 20rem;
		height: 6rem;
		inset: 0;
		margin: 0 0 0 6rem;
		padding: 0;
		transition: margin .2s;
	}
	header:focus-within > hgroup:not(:focus-within) {
		margin: 0;
	}
	header > hgroup > h1 > a:not([download]) {
		margin: 0;
	}
	header > hgroup > h1 {
		padding: 1rem;
	}
	header > nav {
		position: fixed;
		z-index: 3;
		align-self: start;
		width: 6rem;
		height: 6rem;
		inset: 0;
		margin: 0;
		padding: 0;
		background-image: var(--content-background-image);
		background-attachment: fixed;
		background-color: var(--content-background-color);
		color: var(--content-foreground);
		box-shadow: 0 0 transparent, 0 0 0 100vmax transparent;
		overflow: clip;
		overscroll-behavior: contain;
		transition: width .2s, height .2s, box-shadow .2s;
	}
	header > nav:focus-within {
		width: 26rem;
		height: 100dvh;
		box-shadow: 0 0 .5rem var(--shadow), 0 0 0 100vmax #3339;
		overflow-y: auto;
	}
	header > nav::before {
		content: "";
		position: fixed;
		z-index: -1;
		inset: 0;
		pointer-events: none;
	}
	header > nav:focus-within::before {
		pointer-events: auto;
	}
	header > nav > p {
		display: block;
		margin: 1rem;
	}
	header > nav > p > a:not([download]) {
		width: 100%;
	}
	header > nav > p:first-of-type {
		position: sticky;
		z-index: 1;
		inset: 0;
		margin: 0;
		padding: 1rem;
		background-image: var(--context-background-image);
		background-attachment: fixed;
		background-color: var(--context-background-color);
		color: var(--context-foreground);
		text-align: right;
		box-shadow: 0 0 .5rem var(--shadow);
	}
	header > nav > p:first-of-type > a:not([download]) {
		width: auto;
		gap: 0;
		font-size: 0;
	}
	header > nav:focus-within > p:first-of-type > a:not([download]) {
		opacity: .4;
		pointer-events: none;
	}
	main > nav {
		grid-column: full;
		margin: -1rem -1rem 1rem -1rem;
		padding: 0 0 0 24rem;
		border-radius: 0;
	}
	main > nav > ul > li > form > p > label:focus-within {
		width: calc(100% - 27rem);
		margin: 1rem 1rem 1rem 26rem;
	}
}
@media (max-width: 44.9375em) {
	header > hgroup {
		margin: 0 0 0 -20rem;
	}
	header > hgroup:focus-within {
		margin: 0;
	}
	header:focus-within > nav:not(:focus-within) {
		width: 26rem;
		height: 100dvh;
		box-shadow: 0 0 .5rem var(--shadow), 0 0 0 100vmax #3339;
		overflow-y: auto;
	}
	header:focus-within > nav:not(:focus-within)::before {
		pointer-events: auto;
	}
	header:focus-within > nav:not(:focus-within) > p:first-of-type > a:not([download]) {
		opacity: .4;
		pointer-events: none;
	}
	footer {
		display: block;
	}
	main > nav {
		padding: 0 0 0 6rem;
	}
	main > nav > p > strong {
		padding: 1rem 0;
	}
	main > nav > p > strong::after {
		display: none;
	}
	main > nav > ul > li > form > p > label:focus-within {
		width: calc(100% - 8rem);
		margin: 1rem 1rem 1rem 7rem;
	}
}
@media print {
	html {
		width: auto;
		height: auto;
	}
	body {
		width: auto;
		height: auto;
		scrollbar-width: none;
		background-image:
			linear-gradient(150.6422deg, #0f0c, #00fc),
			linear-gradient(#f00, #f00);
		background-position:
			left 0 top 0,
			left 0 top 0;
		background-size:
			100dvw 100dvh,
			100dvw 100dvh;
	}
	body::-webkit-scrollbar {
		display: none;
	}
	header,
	footer {
		background-image: none;
	}
	main > section,
	main > article {
		background-image: none;
	}
	main > nav {
		position: relative;
		background-image: none;
	}
}
@media print and (max-width: 67.4375em) {
	header > hgroup {
		position: absolute;
	}
	header > nav {
		position: absolute;
		background-image: none;
		background-color: transparent;
	}
	header > nav::before {
		position: absolute;
	}
	header > nav > p:first-of-type {
		position: relative;
		background-image: none;
		background-color: transparent;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--shadow: #3333;
		--context-background-image: linear-gradient(150.6422deg, #1f8f14, #1f148f);
		--context-background-color: #0336;
		--context-foreground: #ccc;
		--context-button-background: #333;
		--context-button-foreground: #ccc;
		--content-background-image: linear-gradient(150.6422deg, #337a00, #33007a);
		--content-background-color: #3006;
		--content-foreground: #ccc;
		--details-background: #cff6;
		--details-foreground: #fccc;
		--link-background: #3333;
		--link-foreground: #9cf;
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--shadow: #3333;
		--context-background-image: linear-gradient(150.6422deg, #85cc52, #8552cc);
		--context-background-color: #fcc6;
		--context-foreground: #333;
		--context-button-background: #ccc;
		--context-button-foreground: #333;
		--content-background-image: linear-gradient(150.6422deg, #70e066, #7066e0);
		--content-background-color: #cff6;
		--content-foreground: #333;
		--details-background: #0336;
		--details-foreground: #300c;
		--link-background: #3333;
		--link-foreground: #036;
	}
}