:root {
	--background: #060612;
	--primary: #10101D;
	--light-primary: #181829;
	--accent: #BFC86A;
	--dark-accent: #AFA323;
	--secondary: #3dA095;
	--text: #D8D8D8;
	--title: var(--text);
	--title-shadow: var(--dark-accent);

	/* themes */
	&:has(option[value="bonbon"]:checked) {
		--background: #F7FBCF;
		--primary: #EEECB8;
		--light-primary: #365A93;
		--accent: #E53D7A;
		--dark-accent: #60CCFB;
		--secondary: #282F53;
		--text: #282F53;
		--title: #F6B3E1;
		--title-shadow: #E53D7A;
	}
	&:has(option[value="lyra"]:checked) {
		--background: #8CFFDB;
		--primary: #62DFB2;
		--light-primary: #62DFB2;
		--accent: #F2DA20;
		--dark-accent: #FFF;
		--secondary: #FFF;
		--text: #14573B;
		--title: #FFF;
		--title-shadow: #27B0AD;
	}
	
	--defaultWidth: min(85%, 1500px);
}
html, body {
	margin: 0;
	padding: 0;
	overflow: visible;
	color: var(--text);
}
body {
	min-height: 100vh;
	display: grid;
	position: relative;
	grid-template-rows: auto 1fr auto;
}

/* basic text formatting */
@font-face {
	font-family: 'CourierPrime';
	src: url('/fonts/CourierPrime/courierprime-regular-webfont.woff2') format('woff2'),
		 url('/fonts/CourierPrime/courierprime-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CourierPrime';
	src: url('/fonts/CourierPrime/courierprime-italic-webfont.woff2') format('woff2'),
		 url('/fonts/CourierPrime/courierprime-italic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'CourierPrime';
	src: url('/fonts/CourierPrime/courierprime-bolditalic-webfont.woff2') format('woff2'),
		 url('/fonts/CourierPrime/courierprime-bolditalic-webfont.woff') format('woff');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'CourierPrime';
	src: url('/fonts/CourierPrime/courierprime-bold-webfont.woff2') format('woff2'),
		 url('/fonts/CourierPrime/courierprime-bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}




@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
	font-weight: 100;
	font-style: italic;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-Light.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-LightItalic.woff2') format('woff2');
	font-weight: 200;
	font-style: italic;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-Thin.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-RegularItalic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'JetBrainsMono'
	src: url('/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
}




@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-Black.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-BlackItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-Bold.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-BoldItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-ExtraBold.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-ExtraBoldItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-ExtraLight.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-ExtraLightItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-Italic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-Light.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-LightItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-Medium.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-MediumItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-Regular.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-SemiBold.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-SemiBoldItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-Thin.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tomorrow';
    src: url('/fonts/Tomorrow/Tomorrow-ThinItalic.woff2') format('woff2'),
        url('/fonts/Tomorrow/Tomorrow-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}



*:focus, summary:focus p {
	outline: var(--accent) 2px solid;
	border-radius: .2rem;
}

h1, h2, h3, p, li {
	color: var(--text);
	margin-bottom: 0;
	position: relative;
}
h1, h2, h3 {
	font-family: "Tomorrow", sans-serif;
	font-weight: 500;
}
h1 {
	font-weight: 600;
}
p, ul, ol{
	font-family: "CourierPrime", monospace;
}
h1, h2, h3, p, li, a, span {	
	&[highlight], & span[highlight] {
		font-weight: 600;
		color: var(--accent);
	}
	&[highlight2], & span[highlight2] {
		font-style: italic;
		color: var(--secondary)
	}
	&[small] {
		font-size: .7em;
	}
	&[nowrap] {
		text-wrap: nowrap;
	}
	& > span[subtitle] {
		font-family: "CourierPrime", monospace;
		font-size: .6em;
		font-weight: normal;
		font-style: italic;
		color: var(--text);
		margin: 0;
		display: block;
		&::first-line { text-decoration: overline var(--text); }
	}
	&[unselectable], & span[unselectable] {
		-webkit-user-select: none; /* Safari */
		-webkit-touch-callout: none;
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+/Edge */
		-webkit-touch-callout: none;
		user-select: none; /* Standard */
	}
}
::selection {
	color: black;
	background-color: var(--accent);
}
span[wiggly] {
	white-space: pre;
	a {
		display: inline-block;
		animation: .5s updown ease-in-out infinite alternate,
		.6s leftright ease-in-out infinite alternate;
		@media (prefers-reduced-motion: reduce) {
			animation-play-state: paused, paused;
		}
	}
	:nth-child(5n) {
	}
	:nth-child(5n+1) {
		animation-delay: calc(1s/5 - 1s);
	}
	:nth-child(5n+2) {
		animation-delay: calc(1s/5*2 - 1s);
	}
	:nth-child(5n+3) {
		animation-delay: calc(1s/5*3 - 1s);
	}
	:nth-child(5n+4) {
		animation-delay: calc(1s/5*4 - 1s);
	}
}
@keyframes updown {
	from {
		translate: 0 -.1em;
	}
	to {
		translate: 0 .1em;
	}
}
@keyframes leftright {
	from {
		transform: translateX(-.05em);
	}
	to {
		transform: translateX(.05em);
	}
}
code {
	white-space: pre-wrap;
	color: white;
	text-align: left;
	font-family: "JetBrainsMono", monospace;
	outline: 1px solid var(--accent);
	font-size: 1rem;
	border-radius: 5px;
	outline-offset: 2px;
	width: fit-content;
	max-width: 100%;
}
pre code, div code {
	tab-size: 4;
	display: block;
	outline-width: 2px;
	border-radius: 20px;
	outline-offset: 5px;
	padding: 0 25px;
	margin: 50px auto;
}
span[block] {
	display: block;
}
h1 {
	font-size: 3rem;
	margin-top: 60px;
}
h2 {
	font-size: 2.3rem;
	margin-top: 50px;	
}
h3 {
	font-size: 1.7rem;
	margin-top: 30px;
}
p, ul, ol{
	font-size: 1.3rem;
	margin-top: 15px;
	text-align: justify;
}
p {
	line-height: 1.23;
}
ul, ol {
	margin: 5px 0 10px 0;
}
a {
	color: inherit;
	&[decorated] {
		text-decoration-line: underline;
		text-decoration-style: dotted;
		text-decoration-color: var(--accent);
		font-style: italic;
		&:hover {
			text-decoration-style: solid;
			font-weight: 600;
		}
		&:focus {
			font-weight: 600;
		}
	}
	&[undecorated] {
		text-decoration: none;
	}
}
header-fallback a {
	margin-right: 20px;
}

/* misc styling */
[hidden] {
	display: none;
}
[clickable] {
	cursor: pointer;
}
u {
	text-decoration-thickness: 1px;
	text-decoration-inset: .15rem;
	text-underline-offset: .15rem;
}

.box, div-box, header-fallback {
	margin: 0 auto;
	position: relative;
	width: var(--defaultWidth);
	display: block;
}
article-box {
	margin: 0 auto;
	position: relative;
	width: min(var(--defaultWidth), 1000px);
	display: block;
}
article-contents {
	display: block;
	position: relative;
	margin: 120px 100px;
	padding: 1px;
	width: fit-content;
	* {
		text-align: left;
	}
	ul, ol ul, ol{
		margin: 0 0 15px 0;
	}
	ul > li > a {
		font-style: italic;
		font-size: 1.1rem;
	}
	li {
		margin-top: 5px;
	}
	h2 {
		margin-top: 15px;
		margin-bottom: 20px;
	}
	svg {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: visible;
	}
}
top-button {
	position: fixed;
	width: 50px;
	height: 50px;
	display: block;
	right: 120px;
	bottom: 90px;
	z-index: 100;
	a {
		display: block;
	}
	polyline {
		stroke-width: 10 !important;
	}
}
.polyline {
	stroke-linecap: round;
	fill: none;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;

	stroke: var(--secondary);
	stroke-width: 4;

	&.accent {
		stroke: var(--accent);
		stroke-width: 3;
		stroke-dasharray: 20,20,1;
	}
}
.shadow {
  -webkit-filter: drop-shadow( 0px 13px 13px rgba(0, 0, 0, .9));
  filter: drop-shadow( 0px 13px 13px rgba(0, 0, 0, .9));
}

/* conditional overrides */
@media (width <= 1024px) {
	p, ul { text-align: left; }
	ul {
		padding-inline-start: 30px;
		ul { padding-inline-start: 15px; }
	}
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.6rem;
	}
	h3 {
		font-size: 1.4rem;
	}
	pre code, div code {
		outline: none;
		border-block: solid 2px var(--accent);
		border-radius: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		overflow: clip;
		font-size: .95rem;
	}
	article-contents {
		margin: 50px 0;
		width: 100%;
		border-block: solid 3px var(--secondary);
		svg {
			display: none;
		}
	}
	top-button {
		right: 30px;
		bottom: 20px;
	}
}
@media (width <= 512px) {
	pre code, div code {
		tab-size: 2;
		font-size: .8rem;
	}
}