/* NOTES:
** * This file requires a theme css file (./css/themes/) to be loaded since there are no color variables included here
*/

@import url("/css/fonts.css");
@import url("/css/utility.css");
@import url("/css/base.css");

/* #endregion */
/* #region Basic – Scrollbars, html, body, main, deco, transition screen */
:root {
	color-scheme: light dark;
	&:has(#theme-light:checked) { color-scheme: light; }
	&:has(#theme-dark:checked) { color-scheme: dark; }

	--line-height: 1.5;
	--page-padding: 1rem;
	--main-width: 50rem; /* 800px */

	--500px: 31.25rem;
	--600px: 37.5rem;

	@media (width <= 31.25rem) { /* 500px */
		--page-padding: 0.75rem;
	}
}

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	background-color: transparent;

	&:hover {
		width: 8px; height: 8px;
		background-color: transparent;
	}
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--clr-scrollbar);
}
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-corner { background-color: transparent; }

/* https://solaria.neocities.org/guides/csstidbits#linkspace */
:target {
	scroll-margin: 1rem;}

html {
	background-color: var(--clr-prim-bg);
	background-image: var(--prim-bg);
	background-position: 50vw 50vh;

	scrollbar-color: var(--clr-scrollbar) transparent;
	/*scrollbar-width: auto;*/
	scrollbar-gutter: stable both-edges;

	color: var(--clr-main);

	/* transition: .75s; */
}

body {
	margin: 0;
	padding: var(--page-padding);
}

main {
	max-width: var(--main-width);
	margin: 0 auto 0 auto;
	position: relative; /*To center h-c content block*/

	& > :first-child {
		margin-top: 0;
	}

	& > :last-child {
		margin-bottom: 0;
	}
}

#deco-body {
	display: none;
	width: 100vw;
	height: 100%;
	top: 0;
	left: 0;
}

#deco-top { display: none; }
#deco-left { display: none; }
#deco-right { display: none; }

#theme-transition-screen {
	display: none;
	position: fixed;
	width: 100vw; height: 100vh;
	top: 0; left: 0;
	overflow: hidden;
	z-index: 9999;
	background-color: var(--clr-transition-screen);
	transition: .5s linear;
	transition-property: opacity, background-color;
	opacity: 0;
	/*For transition screen icon (display gets set to flex when the transition is happening)*/
	justify-content: center;
	align-content: center;

	img {
		margin: auto;
		max-width: 100vw;
		max-height: 100vh;
		opacity: .5;

		&::selection {
			background-color: none;
		}
	}
}
/* #endregion */

/* #region Header – h1, nav, current */
header {
	max-width: var(--main-width);
	margin: 1.8rem auto 1rem auto;
	text-align: center;

	#h1-marker-container {
		padding: 1.5rem 6px 1.5rem 6px;
		background-image: var(--bg-h1);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-repeat: round;
		filter: var(--filter-header);
		min-height: 4rem;

		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	h1 {
		transform: skew(-5deg);
		text-shadow: var(--3px) var(--3px) var(--clr-h1-dropshadow);
		line-height: 1;
		margin-top: 0;
		margin-bottom: 0;
		font-size: 2.4rem;
	}

	#title-subtitle {
		margin-bottom: -.4rem;
		color: var(--clr-h1-subtitle);
		font-style: italic;
		margin-top: .4rem;
		font-size: 1.1rem;
	}

	#title-supertitle {
		margin-top: var(--6px);
		margin-bottom: .1rem;
		color: var(--clr-last-updated);
		font-size: 1rem;
		line-height: 1;
		min-height: 1rem;

		a {
			text-decoration-color: var(--clr-last-updated);
			
			&:hover {
				text-decoration-color: currentColor;
			}
		}
	}

	#h1-extra {
		text-align: center;
		min-height: calc(1.3rem * var(--line-height));
		margin: var(--6px) 0 0 0;
		font-size: .9rem;

		position: relative; /* For hovercards inside it */
		
		& .inline-list {
			margin: 0;
		}
	}
}

#page-metadata {
	text-align: center;
	min-height: calc(.8rem * var(--line-height));
	margin: var(--8px) 0 var(--6px);
	font-size: .8rem;
	color: var(--clr-last-updated);
}

.link-button-wrapper {
	display: flex;
	gap: .5em;
	justify-content: center;
	flex-wrap: wrap;
}

.link-button {
	--bg: var(--clr-link-button-cyan-bg);
	--border: var(--clr-link-button-cyan-border);
	--hover: var(--clr-nav-hover);

	display: inline-block; /* Setting scale on hover would do nothing without this set */

	color: var(--clr-main);
	transition: ease-in-out .15s;
	transition-property: color, filter;

	padding: .1em .4em;
	background-color: var(--bg);
	border: var(--2px) solid var(--border);
	flex: 0 0 auto;
	text-decoration: none;
	font-weight: bold;
	/*border-radius: 2px;*/
	will-change: transform;
	
	margin: .25rem 0;

	transition: background-color .2s, border-color .2s, color .2s, scale .2s;

	&:hover {
		color: var(--hover) !important;
		background-color: hsl(from var(--bg) h s calc(l + 10));
		border-color: hsl(from var(--border) h s calc(l + 10));

		@media (prefers-reduced-motion: no-preference) {
			scale: 1.05;
		}
	}

	&:active {
		scale: 1;
	}

	@media (width <= 31.25rem) { /* 500px */
		/*flex: 1 1 30%;*/
	}

	&.red {
		--bg: var(--clr-link-button-red-bg);
		--border: var(--clr-link-button-red-border);
	}

	&.yellow {
		--bg: var(--clr-link-button-yellow-bg);
		--border: var(--clr-link-button-yellow-border);
	}

	&.green {
		--bg: var(--clr-link-button-green-bg);
		--border: var(--clr-link-button-green-border);
	}

	&.cyan {
		--bg: var(--clr-link-button-cyan-bg);
		--border: var(--clr-link-button-cyan-border);
	}

	&.blurple {
		--bg: var(--clr-link-button-blurple-bg);
		--border: var(--clr-link-button-blurple-border);
	}

	&.brown {
		--bg: var(--clr-link-button-brown-bg);
		--border: var(--clr-link-button-brown-border);
	}

	&.gray {
		--bg: var(--clr-link-button-gray-bg);
		--border: var(--clr-link-button-gray-border);
	}

	&.black {
		color: var(--clr-link-button-black-text);
		--bg: var(--clr-link-button-black-bg);
		--border: var(--clr-link-button-black-border);
		--hover: var(--clr-link-button-black-text-hover);
	}
}


/* #region <nav>, #splash-link, #old-page-link */
nav#global-nav {
	max-width: var(--main-width);
	margin: 0 auto;
	text-align: center;

	@media (hover: none) {
		margin-bottom: 1.5rem;
	}
}

#nav-links {
	margin: 0 0 .5rem 0;
	text-align: center;
	position: relative;
	min-width: 17rem; /* 272px..? */
	max-width: 100%;

	line-height: 1.7;

	display: flex;
	gap: var(--10px);
	justify-content: center;
	flex-flow: row wrap;

	/* transition: .75s; */

	a {
		color: var(--clr-nav);
		transition: ease-in-out .15s;
		transition-property: color;

		padding: .2rem .1rem;
		border: var(--1px) dashed currentColor;
		flex: 1 1 auto;
		text-transform: uppercase;
		text-decoration: none;
		font-weight: bold;
		/*border-radius: var(--2px);*/

		&:hover {
			color: var(--clr-nav-hover);
		}

		&.nav-img {
			flex: none;
			vertical-align: middle;
			flex-basis: 2.0625rem;

			display: flex;
			align-items: center;
			justify-content: center;

			--mask-image: none;

			&::after {
				position: absolute;
				content: ' ';
				width: 1.375rem;
				height: 1.375rem;
				background-color: var(--clr-nav);
				mix-blend-mode: color;
				background-clip: content-box;
				mask-image: var(--mask-image);
				mask-mode: alpha;
				
				opacity: 1;
				transition: ease-in-out .15s opacity;
			}

			img {
				width: 1.375rem;
				height: 1.375rem;
				opacity: .6;
				transition: ease-in-out .15s opacity;
				image-rendering: pixelated;
			}

			&:hover {
				&::after {
					opacity: 0;
				}
			
				img {
					opacity: 1;
				}
			}
		}
		
		@media (width <= 31.25rem) { /* 500px */
			flex: 1 1 30%;
		}
	}
}

#nav-skipper {
	position: absolute;
	top: -3.5rem;
	left: 16px;
	text-align: center;
	margin: auto;
	border: 1px solid;
	border-color: var(--clr-box-border-top) var(--clr-box-border-sides) var(--clr-box-border-bottom);
	border-radius: 8px;
	padding: 10px;
	font-size: 1.25rem;
	background: var(--clr-box-bg);
	box-shadow: 0 0 0 2px var(--clr-box-rim) inset;

	transition: ease-in-out .3s;
	transition-property: top;
	z-index: 1;

	&:has(:focus) {
		top: 16px;
	}

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}
/* #endregion */

/* #region #nav-current, #theme-switcher */
nav:hover #nav-current {
	visibility: visible;
	opacity: 1;
}

#nav-current {
	display: none !important;

	margin: 0px;
	padding: 0 10px 2px 10px;
	text-align: left;
	max-width: var(--main-width);

	color: var(--clr-current);
	
	visibility: hidden;
	opacity: 0;
	transition: ease-in-out .15s;
	transition-property: opacity, visibility;

	& p-t { font-style: normal; }
	& a {
		color: var(--clr-current);
		text-decoration-color: var(--clr-current);

		&:hover {
			color: var(--clr-current-hover);
			text-decoration-color: var(--clr-current-hover);
		}
	}

	@media (hover: none) {
		visibility: visible;
		opacity: 1;
	}
}
/* #endregion */
/* #endregion */

/* #region Site Settings Menu */
#theme-switcher {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 3rem;
	height: 3rem;
	line-height: 1;
	padding: .5rem;

	color: var(--clr-current);
	font-family: serif;
	font-size: 2rem;
	opacity: .5;

	transition: opacity .2s, bottom .2s;

	/* Revert default Styling */
	background: none;
	border: 0;

	&:hover, &:focus-visible {
		color: var(--clr-current-hover);
		filter: none;
		bottom: 0;
		opacity: 1;

		--shake-intensity: 13deg;
		animation: shake-3 1.1s ease-out;
	}

	&:active {
		filter: none;
		bottom: 0;
	}

	&::after {
		content: var(--svg-theme-toggler);
		filter: var(--filter-theme-toggler);
		transition: filter .2s;
	}

	&:hover::after {
		filter: var(--filter-theme-toggler-hover);
	}
}
/* #endregion */


/* #region Table of Contents */
#table-of-contents {
	position: fixed;
	top: 5px;
	left: 5px;
	border: none;
	background: none;
	padding: 0;
	min-width: 400px;

	transition: .2s linear;
	z-index: 1;

	summary {
		position: absolute;
		padding: 0px 1px 2px 1px;
		top: 2px;
		left: 2px;
		font-size: 24px;
		cursor: pointer;
		color: var(--clr-toc-symbol);
		z-index: 2;
		background-color: var(--clr-toc-symbol-border);
		border-radius: 4px;

		&::marker { content: none; }
		&::selection { background-color: 0; }
	}

	ul, ol {
		padding-left: 2rem;
	}

	nav {
		transition: .2s linear;
	
		position: fixed;
		top: 1rem;
		/*right: calc(((100vw - 800px) / 2) + 800px + 2rem + 28px);*/
		left: 1rem;
		min-width: 0;
		max-width: min(320px, calc(100vw - 2rem));
		max-height: calc(100vh - 2rem);
		overflow: scroll;
		box-sizing: border-box;
	
		border: 2px solid var(--clr-toc-border);
		background: var(--bg-lines) var(--clr-toc-bg);
	
		padding: 10px;
		padding-right: 15px;
		border-radius: 12px;
		filter: drop-shadow(0 0 10px var(--clr-toc-shadow)) drop-shadow(0 0 10px var(--clr-toc-shadow));
	
		transition: .2s linear;
		opacity: 0;
		scrollbar-color: var(--clr-toc-scrollbar) transparent;

		li a {
			color: var(--clr-toc-link) !important;
			text-decoration: none;

			&:hover {
				color: var(--clr-toc-link-hover) !important;
				text-decoration: underline;
			}
		}

		ul {
			padding-left: 14px;
			margin-bottom: 1rem;
			margin-top: 0;
		}

		& > ul { padding-left: 20px; }

		/* h2 */
		& > ul > li { font-weight: bold; }

		/* h3 */
		& > ul > ul > li a { color: var(--clr-h3) !important; }
		
		/* h4 */
		& > ul > ul > ul > li a {
			color: var(--clr-h4) !important;
			font-style: italic;
		}

		/* h5 */
		& > ul > ul > ul > ul > li { list-style-type: circle; }
		& > ul > ul > ul > ul > li a { color: var(--clr-h5) !important; }

		/* h6 */
		& > ul > ul > ul > ul > ul > li a {
			color: var(--clr-h6)!important;
			font-style: italic;
		}
	}
}

	/*#table-of-contents summary:after {
	pointer-events: none;
	transition: .1s linear;
	content: " Table of Contents";
	color: #aaa;
	font-weight: normal;
	font-size: 20px;
	position: relative;
	bottom: 1px;
	filter: drop-shadow(2px 0 #000) drop-shadow(-2px 0 #000) drop-shadow(0 2px #000) drop-shadow(0 -2px #000) drop-shadow(2px -2px #000) drop-shadow(-2px -2px #000) drop-shadow(-2px 2px #000) drop-shadow(2px 2px #000);

	opacity: 0;}

	#table-of-contents summary:hover::after, #table-of-contents[open] summary::after {
	pointer-events: all;
	opacity: 1;}*/

		#table-of-contents[open] nav {
		opacity: 1;}

#toc-top, #toc-bottom {
overflow: hidden;
text-align: center;
color: var(--clr-toc-wrappers);
font-size: .9rem;
margin-top: 4px;
margin-bottom: 4px;}

	#toc-top a, #toc-bottom a {
	color: var(--clr-toc-wrappers);
	text-decoration: none;}

	#toc-top a:hover, #toc-bottom a:hover {
	color: var(--clr-toc-wrappers-hover);
	text-decoration: underline;}

#toc-top {
margin-top: -6px;}

#toc-bottom {
margin-top: -.8225rem;
margin-bottom: -4px;}

	#toc-top:before, #toc-top:after, #toc-bottom:before, #toc-bottom:after {
	/* background-color: var(--clr-h6-lines); */
	background: linear-gradient(90deg, var(--clr-toc-wrappers) 0, var(--clr-toc-wrappers) 1px, transparent 1px, transparent 2px) repeat-x;
	background-size: 2px;
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;}

	#toc-top:before, #toc-bottom:before {
	right: .5em;
	margin-left: -50%;}

	#toc-top:after, #toc-bottom:after {
	left: .5em;
	margin-right: -50%;}


#table-of-contents nav .checkered li:nth-child(2n) {
opacity: .75;}

#table-of-contents nav .checkered.alt li:nth-child(1n) {
opacity: .75;}

/* #endregion */


/* #region Main article elements */
/* #region Headings – <h2>-<h6> */

h2, h3, h4, h5, h6, .vh1, .vh2, .vh3, .vh4, .vh5, .vh6 {
	--clr-heading-border: var(--clr-h2-border);
	--clr-heading-bg: var(--clr-h2-bg);

	box-sizing: border-box;

	padding: .125rem .5rem;
	background-color: var(--clr-heading-bg);
	border: 1px solid var(--clr-heading-border);
	border-radius: .675rem;

	font-weight: bold;
	
	overflow-x: hidden; /* This and max-width instead of width hides the lines if there's an element like .infobox floating to the right of this */
	/*clear: both;*/

	margin-top: 2rem;
	margin-bottom: 1rem;
	padding-bottom: .0625rem;

	margin-left: -1.25rem;
	margin-right: -1.25rem;

	+ .subtitle {
		margin-left: -1.25rem;
		margin-right: -1.25rem;

		padding-left: .5rem;
		padding-right: .5rem;
		margin-top: -.6rem;
		margin-bottom: 1rem;

		+ h2, + h3, + h4, + h5, + h6, + .vh2, + .vh3, + .vh4, + .vh5, + .vh6 {
			margin-top: .5rem;
		}
	}

	+ h2, + h3, + h4, + h5, + h6, + .vh2, + .vh3, + .vh4, + .vh5, + .vh6 {
		margin-top: .5rem;
	}

	&.center, &.center + .subtitle {
		text-align: center;
	}

	&.right, &.right + .subtitle {
		text-align: right;
	}

	&.indent-1, &.indent-1 + .subtitle {
		margin-left: 0;
		margin-right: 0;
	}

	&.indent-2, &.indent-2 + .subtitle {
		margin-left: 1.25rem;
		margin-right: 1.25rem;
	}

	@media screen and (width < 55rem) { /* 880px */
		margin-left: 0;
		margin-right: 0;
		
		+ .subtitle {
			margin-left: 0;
			margin-right: 0;
		}

		&.indent-1, &.indent-1 + .subtitle {
			margin-left: var(--10px);
			margin-right: var(--10px);
		}
	}
}

.vh1 {
	color: var(--clr-h1);
	--clr-heading-border: var(--clr-h1-border);
	--clr-heading-bg: var(--clr-h1-bg);
	font-size: 1.8rem;

	+ .subtitle {
		color: var(--clr-h1);
	}
}

h2, .vh2 {
	color: var(--clr-h2);
	--clr-heading-border: var(--clr-h2-border);
	--clr-heading-bg: var(--clr-h2-bg);

	/*transform: rotate(-1deg);*/
	font-size: 1.4rem;

	+ .subtitle {
		color: var(--clr-h2);
		margin-top: -.8rem;
	}
}

h3, .vh3 {
	color: var(--clr-h3);
	--clr-heading-border: var(--clr-h3-border);
	--clr-heading-bg: var(--clr-h3-bg);
	font-size: 1.3rem;

	/*filter: drop-shadow(1px 1px #634218);*/
	
	+ .subtitle {
		color: var(--clr-h3);
	}
}

h4, .vh4 {
	color: var(--clr-h4);
	--clr-heading-border: var(--clr-h4-border);
	--clr-heading-bg: var(--clr-h4-bg);
	font-size: 1.2rem;
	
	+ .subtitle {
		color: var(--clr-h4);
	}
}

h5, .vh5 {
	color: var(--clr-h5);
	--clr-heading-border: var(--clr-h5-border);
	--clr-heading-bg: var(--clr-h5-bg);
	font-size: 1.1rem;
	
	+ .subtitle {
		color: var(--clr-h5);
		/*margin-top: -1.25rem;*/
	}
}

h6, .vh6 {
	color: var(--clr-h6);
	--clr-heading-border: var(--clr-h6-border);
	--clr-heading-bg: var(--clr-h6-bg);
	font-size: 1rem;
	
	+ .subtitle {
		color: var(--clr-h6);
		/*margin-top: -2rem;*/
		font-size: 1rem;
	}
}
/* #endregion */

/*p { margin: 0 0 1rem 0; }*/
b { color: var(--clr-bold);}
s { opacity: .6; }

legend {
	font-weight: bold;
	color: var(--clr-bold);
}

/* #region KBD */
	kbd {
		font-size: 1rem;
		padding: 0 .25rem;
		background-color: var(--clr-kbd);
		border-radius: .25rem;

		border: var(--clr-kbd-accent) solid var(--1px);
		/*border-bottom: var(--clr-kbd-accent) solid 3px;*/

		box-decoration-break: clone;

		-moz-box-shadow: 0 var(--2px) 0 var(--clr-kbd-accent), 0 0 0 var(--1px) var(--clr-kbd-rim) inset;
		-webkit-box-shadow: 0 var(--2px) 0 var(--clr-kbd-accent), 0 0 0 var(--1px) var(--clr-kbd-rim) inset;
		box-shadow: 0 var(--2px) 0 var(--clr-kbd-accent), 0 0 0 var(--1px) var(--clr-kbd-rim) inset;
	}
/* #endregion KBD */

/* #region LINKS */
	a {
		/* Link without href attribute */
		color: currentColor;
		text-underline-offset: var(--3px);
		text-decoration: underline var(--clr-link-none);
		/*transition: color .1s ease-in;*/

		&:hover {
			color: var(--clr-link-none);
			text-decoration-thickness: 2px;

			& b { color: var(--clr-link-none); }
		}

		/* Visited link */
		&:visited {
			text-decoration-color: var(--clr-link-visited);

			&:hover {
				color: var(--clr-link-visited);			
				& b { color: var(--clr-link-visited); }
			}
		}

		/* Unvisited link */
		&:link {
			text-decoration-color: var(--clr-link-unvisited);

			&:hover {
				color: var(--clr-link-unvisited);
				& b { color: var(--clr-link-visited); }
			}
		}

		&.a-secret {
			color: currentColor;
			text-decoration: none;
			font-weight: inherit;
		
			&:hover {
				color: currentColor;
				text-decoration: underline currentColor;
			}
		}
	}
/* #endregion LINKS */

/* #region INLINE BUTTON */
	button.inline-button {
		--main-color: var(--clr-inline-button-line);
		text-decoration: underline wavy var(--1px) var(--main-color);
		cursor: pointer;

		/* Revert button styling */
		padding: 0;
		background: none;
		border: none;
		border-radius: 0;
		color: currentColor;
		position: static;
		transition: none;
		line-height: var(--line-height);

		&:hover {
			text-decoration-thickness: var(--2px);
			color: var(--main-color);
			filter: none;
		}

		@media (scripting: none) {
			--main-color: var(--clr-inline-button-line-disabled);
			cursor: default;
			
			&:hover {
				text-decoration-thickness: var(--1px);
				color: currentColor;
			}
		}
	}

/* #endregion */

/* #region Lists – <ul>, <ol>, <li> */
ul, ol {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-left: 1.5rem;
	/*border-left: 1px solid gray;
	border-left-color: linear-gradient(
		transparent 0px,
		transparent 32px,
		gray 32px,
		gray 100%
	);*/
}

@media screen and (width < 31.25rem) { /* 500px */
	ul, ol {
		padding-left: 1.1rem;
	}
}

ul { list-style-type: disc; }

/*ol > ol { list-style-type: upper-roman; }
ol > ol > ol { list-style-type: lower-alpha; }
ol > ol > ol > ol { list-style-type: decimal; }
ol > ol > ol > ol > ol { list-style-type: upper-roman; }
ol > ol > ol > ol > ol > ol { list-style-type: lower-alpha; }*/

li {
	margin-bottom: .5rem;

	&:last-child { margin-bottom: 0; }
	&::marker {
		font-weight: bold;
		color: var(--clr-li-marker);
	}

	&.checkbox::marker { content: "☐ "; }
	&.checkbox-y::marker { content: "☑ "; font-weight: bold; }
	&.checkbox-n::marker { content: "☒ "; }
	&.questionmark::marker { content: "? "; font-weight: bold; }
	&.counter::marker { content:"<< "; font-weight: bold; }
	&.follow-up::marker { content:"🡲 "; /*->*/ font-weight: bold; }
	&.plus::marker { content:"+ "; font-weight: bold; }
	&.minus::marker { content:"- "; font-weight: bold; }
}

/* #endregion */

/* For some reason hr is slightly transparent and the end color is#717171*/
hr { 
	margin-top: 1.6rem;
	margin-bottom: 1.6rem;
	border: 0;
	border-top: 2px solid var(--clr-h2-line);
	color: var(--clr-hr);

	width: 820px;
	left: -10px;
	position: relative;

	&.hr-h2 { border-top: 2px solid var(--clr-h2-line); }
	&.hr-h3 { border-top: 2px dotted var(--clr-h3-line); }
	&.hr-h4 { border-top: 2px dotted var(--clr-h4-line); }
	&.hr-h5 { border-top: 2px dotted var(--clr-h5-line); }
	&.hr-h6 { border-top: 2px dotted var(--clr-h6-line); }
}

@media only screen and (max-width: 880px) {
	hr {
		left: 0;
		width: 100%;
	}
}

table { margin-bottom: 1rem; }


blockquote {
	position: relative; /* Anchor for ::before & ::after */

	margin: 1rem 0;
	border: var(--2px) solid var(--clr-blockquote-border);
	background: var(--clr-blockquote-bg);
	padding: var(--5px) var(--10px);
	border-radius: 1rem;

 	box-shadow: 0 0 0 var(--3px) var(--clr-blockquote-rim) inset;
	background-image: radial-gradient(var(--clr-blockquote-pattern) 41.8%, transparent 42.8%);
	background-position: 0px 0px, var(--5px) var(--5px);
	background-size: var(--5px) var(--5px);
	background-repeat: repeat;

	& > :first-child { margin-top: 0; }
	& > :last-child { margin-bottom: 0; }

	& + cite {
		display: block;
		margin: -.7rem 0 1rem 0;
		/*text-align: right;*/

		&::before {
			content: "👤 ";
			font-style: normal;
		}
	}

	&:has(+ cite) {
		border-bottom-left-radius: 0;
	}

	/*&::before, &::after {
		content: "\"";
		position: absolute;
		color: var(--clr-blockquote-border);
		font-size: 32px;
		font-weight: bold;
	}
	&::before {
		left: 5px;
		bottom: -23px;
	}
	&::after {
		right: 3px;
		top: -8px;
	}*/
}

code {
	/*font-family: "Monaspace Radon";*/
	font-family: var(--font-monospace);
	/*font-feature-settings: "liga";*/
}

/* Any code block that isn't the one generated via jekyll's { highlight <lang> } */
code:not([data-lang]) {
	font-size: .9em;
	padding: 0 .25rem 0;
	background-color: var(--clr-inline-code-bg);
	border-radius: .25rem;
	/*border-left: var(--2px) solid currentColor;*/
	/*border-right: var(--2px) solid currentColor;*/

	border: var(--1px) solid var(--clr-inline-code-border);

	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

pre {
	font-family: var(--font-monospace);
	overflow: scroll;
	
	font-size: .9rem;
  	line-height: 1.8;

	&.txt {
		font-family: var(--font-sans);
		font-size: 1rem;
  		line-height: 1.5;

		background-color: var(--clr-sec-bg);
		border: var(--2px) solid var(--clr-border);
		padding: 0.25rem 1rem;
		border-radius: 0.25rem;
		tab-size: 3;
		background-image: var(--bg-lines);

		overflow-wrap: break-word;
		white-space: pre-wrap;       /* Since CSS 2.1 */
		white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
		white-space: -pre-wrap;      /* Opera 4-6 */
		white-space: -o-pre-wrap;    /* Opera 7 */
		word-wrap: break-word;       /* Internet Explorer 5.5+ */

		filter: drop-shadow(0 0.25rem var(--clr-border));
	}
}

.highlight code {
	font-family: var(--font-monospace);
}

pre.code, .highlight pre {
	background-color: var(--clr-pre-bg);
	padding: 0.25rem 1rem;
	border: var(--3px) solid var(--clr-pre-border-tl);
	border-bottom-color: var(--clr-pre-border-br);
	border-right-color: var(--clr-pre-border-br);
	/*border-radius: var(--5px);*/
	/*white-space: pre-wrap;*/
	tab-size: 4;
	text-align: left;
	overflow: scroll;

	max-height: var(--500px);

	scrollbar-color: var(--clr-pre-scrollbar);
}
	
.highlight pre code { padding: 0; }

.highlight {
	color: var(--clr-codeblock-normal);
	& .c {
		/*font-family: var(--font-monospace-cursive);*/
		font-style: italic;
		color: var(--clr-codeblock-comment);
	}

	& .language-css {
		& .nt, & .nc { color: var(--clr-codeblock-highlight); }
		& .py, & .nl { color: var(--clr-codeblock-highlight); font-weight: bold; }
		& .nx, & .nb, & .n, & .m, & .l { font-weight: bold; }
	}

	& .language-html {
		& .na { color: var(--clr-codeblock-highlight); }
		& .nt { color: var(--clr-codeblock-highlight); font-weight: bold; }
	}

	& .language-shell {
		& .nb { font-weight: bold; }
	}
}

/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.highlight .language-html .lineno {user-select: none; -webkit-user-select: none;-moz-user-select: none; -o-user-select: none;} 
.lineno::-moz-selection {background-color: transparent;} /* Mozilla specific */
.lineno::selection {background-color: transparent;} /* Other major browsers */
	
fieldset {
	border: 2px solid rgba(from var(--clr-main) r g b / .2);
}


/* #region Figure & Image */
figure:not(.highlight) {
	position: relative;
	padding: var(--6px);
	background-color: var(--clr-figure-bg);

	text-align: center;
	font-size: .9rem;
	line-height: 0;

	border: var(--1px) solid var(--clr-figure-border);

	/* https://css-generators.com/custom-corners/ */
	clip-path: polygon(0 0,calc(100% - 1.25rem) 0,100% 1.25rem,100% 100%,0 100%);

	&:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		border-left: var(--1px) solid var(--clr-figure-border);
		border-bottom: var(--1px) solid var(--clr-figure-border);
		width: 1.125rem;
		height: 1.125rem;
		background: linear-gradient(45deg, var(--clr-figure-bg) .75rem, var(--clr-figure-border) .8215rem);
	}

	& img {
		box-sizing: border-box;
		border: var(--1px) solid var(--clr-figure-border);
		color: rgba(from var(--clr-main) r g b / .7);
		font-style: italic;
		width: 100%;
	}

	& figcaption {
		/*font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;*/
		padding: var(--8px) 0 var(--2px) 0;
		line-height: 1;
	}

	&.figure-right {
		--width: 40%;
		width: var(--width);
		float: right;
		margin: auto 0 .5rem .5rem;
	}

	&.figure-left {
		--width: 40%;
		width: var(--width);
		float: left;
		margin: auto 0 .5rem .5rem;
	}

	&.figure-full {
		margin: var(--2px);
	}
}

figure.highlight {
	margin: 0 0 1rem 0;
}

img {
	max-width: 100%;

	&.emote {
		display: inline;
		height: 1.5em;
		width: 1.5em;
		transition: .2s;
		vertical-align: text-bottom;

		&:hover {
			transform: scale(2);
		}
	}
}

/* #endregion */

.summary {
	position: relative;
	border: var(--4px) solid var(--clr-summary-border);
	/*border-top: none;
	border-bottom: none;*/
	margin: 1rem 4rem;
	padding: .75rem 1rem;
	background-color: var(--clr-summary-bg);

	--clr-inbetween: var(--clr-summary-bg);
	--clr-shapes: var(--clr-summary-pattern);

	background: linear-gradient(135deg,#0000 20.5%,var(--clr-inbetween) 0 29.5%,#0000 0) 0 0.375rem, linear-gradient( 45deg,#0000 8%,var(--clr-inbetween) 0 17%, #0000 0 58%) 0.625rem 0, linear-gradient(135deg,#0000 8%,var(--clr-inbetween) 0 17%, #0000 0 58%,var(--clr-inbetween) 0 67%,#0000 0), linear-gradient( 45deg,#0000 8%,var(--clr-inbetween) 0 17%, #0000 0 58%,var(--clr-inbetween) 0 67%,#0000 0 83%,var(--clr-inbetween) 0 92%,#0000 0), var(--clr-shapes);
	background-size: 1.5rem 1.5rem;

	box-shadow: var(--6px) var(--6px) 0 var(--clr-summary-shadow), -0.375rem var(--6px) 0 var(--clr-summary-shadow);
	
	& > :first-child { margin-top: 0; }
	& > :last-child { margin-bottom: 0; }

	/*&::before, &::after {
		content: ' ';
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .343);
		left: 0;
		top: 0;
	}

	&::before {
		scale: 1.06 1.02;
		transform: rotate(-1.5deg);
	}

	&::after {
		scale: 1.04 1.01;
		transform: rotate(2.5deg);
	}*/
}

/* #region <summary>, <details>, .details-box */
summary { font-weight: bold; }

details, .details-box {
	margin: 1rem 0;
	background-color: var(--clr-details-bg);
	padding: .3125rem .625rem;
	border-radius: .3125rem;
	border: solid 1px;
	border-left: solid .3125rem var(--clr-details-accent);
	border-top-color: var(--clr-details-border-top);
	border-right-color: var(--clr-details-border-right);
	border-bottom-color: var(--clr-details-border-bottom);
	box-shadow: 0 0 0 1px var(--clr-details-rim) inset;
	overflow-x: hidden; /* Prevents overflowing into .infobox on /simple/meta/me */

	& > :first-child { margin-top: 0; }
	& > :last-child { margin-bottom: .2rem; }

	&.draft {
		border-left-style: dotted;
	}

	/* #region Variants */
	&.red, &.error {
		background-color: var(--clr-red-bg);
		border-left-color: var(--clr-red-accent);
		border-top-color: var(--clr-red-border-top);
		border-right-color: var(--clr-red-border-right);
		border-bottom-color: var(--clr-red-border-bottom);

		.db-title, &[open] summary { border-bottom-color: var(--clr-red-underline); }
		& summary::before, &.db-title::before {
			content: "⚡ ";
			font-weight: bold;
			color: var(--clr-red-accent);
		}
		& summary::marker {
			color: var(--clr-red-accent);
		}
	}

	&.orange, &.list {
		background-color: var(--clr-orange-bg); 
		border-left-color: var(--clr-orange-accent);
		border-top-color: var(--clr-orange-border-top);
		border-right-color: var(--clr-orange-border-right);
		border-bottom-color: var(--clr-orange-border-bottom);

		.db-title, &[open] summary { border-bottom-color: var(--clr-orange-underline); }
		& summary::before, & .db-title::before, &.db-title::before {
			content: "☰ ";
			font-weight: bold;
			color: var(--clr-orange-accent);
		}
		& summary::marker {
			color: var(--clr-orange-accent);
		}
	}

	&.yellow, &.warning {
		background-color: var(--clr-yellow-bg);
		border-left-color: var(--clr-yellow-accent);
		border-top-color: var(--clr-yellow-border-top);
		border-right-color: var(--clr-yellow-border-right);
		border-bottom-color: var(--clr-yellow-border-bottom);

		.db-title, &[open] summary { border-bottom-color: var(--clr-yellow-underline); }
		& summary::before, & .db-title::before, &.db-title::before {
			content: "⚠ ";
			font-weight: bold;
			color: var(--clr-yellow-accent);
		}
		& summary::marker {
			color: var(--clr-yellow-accent);
		}
	}

	&.green, &.images {
		background-color: var(--clr-green-bg);
		border-left-color: var(--clr-green-accent);
		border-top-color: var(--clr-green-border-top);
		border-right-color: var(--clr-green-border-right);
		border-bottom-color: var(--clr-green-border-bottom);

		.db-title, &[open] summary { border-bottom-color: var(--clr-green-underline); }
		& summary::before, & .db-title::before, &.db-title::before {
			content: "🖼 ";
			font-weight: bold;
			color: var(--clr-green-accent);
		}
		& summary::marker {
			color: var(--clr-green-accent);
		}
	}

	&.blue, &.info {
		background-color: var(--clr-blue-bg);
		border-left-color: var(--clr-blue-accent);
		border-top-color: var(--clr-blue-border-top);
		border-right-color: var(--clr-blue-border-right);
		border-bottom-color: var(--clr-blue-border-bottom);

		.db-title, &[open] summary { border-bottom-color: var(--clr-blue-underline); }
		& summary::before, & .db-title::before, &.db-title::before {
			content: "🛈 ";
			font-weight: bold;
			color: var(--clr-blue-accent);
		}
		& summary::marker {
			color: var(--clr-blue-accent);
		}
	}

	&.purple, &.mystery {
		background-color: var(--clr-purple-bg);
		/*border: 2px solid #9e83ff44;*/
		border-left-color: var(--clr-purple-accent);
		border-top-color: var(--clr-purple-border-top);
		border-right-color: var(--clr-purple-border-right);
		border-bottom-color: var(--clr-purple-border-bottom);

		.db-title, &[open] summary { border-bottom-color: var(--clr-purple-underline); }
		& summary::before, & .db-title::before, &.db-title::before {
			content: "� ";
			font-weight: bold;
			color: var(--clr-purple-accent);
		}
		& summary::marker {
			color: var(--clr-purple-accent);
		}
	}
	/* #endregion */
}

.db-title, details[open] > summary {
	font-weight: bold;
	border-bottom: var(--clr-details-underline) 2px solid;
	margin-bottom: -.5em;
	padding-bottom: .3rem;
}
/* #endregion */

/* #region Shareables Group stuff */
.sg-buttons img { width: 88px; height: 31px; }
.sg-squares img { width: 32px; height: 32px; }
.sg-stamps img { width: 99px;  height: 56px; }
.sg-blinkies img { width: 150px; height: 20px; }
.sg-badges img { width: 80px; height: 15px; }
img.i-button { width: 88px; height: 31px; }
img.i-square { width: 32px; height: 32px; }
img.i-none { width: unset; height: unset; }
.sg-circle, .sg-circle img { border-radius: 128px; }
.sg-nocircle, .sg-nocircle img { border-radius: 0; }
.sg-squircle, .sg-squircle img { border-radius: 6px; }
/* #endregion Shareables Group stuff */

/* #region Form stuff – <input>, <textarea>, <button> */
input, textarea {
	border-radius: 0;
	border: solid var(--clr-form-border) 1px;

	transform: skew(-4deg);
	box-shadow: 4px 4px 0 var(--clr-form-shadow);
	background-color: var(--clr-form-bg);
	background-image: var(--bg-lines);
}

button {
	color: var(--clr-main);
	background-color: var(--clr-button-bg);
	border: 1px solid var(--clr-button-border);
	border-radius: 5px;
	
	font-size: 1rem;
	letter-spacing: .2px;
	word-spacing: 1px;
	line-height: 1.4;

	padding: 0 4px;
	position: relative;
	bottom: 0;
	filter: drop-shadow(0 0 var(--clr-button-hover));
	transition: .15s;
	cursor: pointer;

	&:hover {
		bottom: 3px;
		filter: drop-shadow(0 3px var(--clr-button-hover));
	}

	&:active {
		bottom: 0;
		filter: drop-shadow(0 0 var(--clr-button-hover));
	}
}

/*.tag-button {

}*/

/* #endregion */


/*
** CUSTOM CLASSES & IDS ---------------------------------------------------------------
** .infobox, .locked, LINK GROUPS
*/

.infobox {
	border: var(--1px) solid;
	border-color: var(--clr-box-border-top) var(--clr-box-border-sides) var(--clr-box-border-bottom);
	background-color: var(--clr-box-bg);
	box-shadow: 0 0 0 var(--1px) var(--clr-box-rim) inset;
	
	margin-left: 1rem;
	margin-bottom: 1rem;
	padding: .375rem;
	float: right;
	width: 15rem; /* 240px */
	box-sizing: border-box;

	/*& tbody {
		display: flex;
  		flex-flow: column nowrap;
	}*/

	& table {
		margin-bottom: 0;

		& tr:has(> :nth-child(2)) td:first-of-type {
			font-weight: bold;
			border-right: var(--1px) solid var(--clr-box-border-sides);
			background: var(--clr-box-bg-2);
			text-align: right;
			padding-right: .25rem;
		}
	}

	& .title {
		background: var(--clr-box-bg-2);
		border: .125rem solid;
		font-weight: bold;
		/*border-top-color: currentcolor;
		border-right-color: currentcolor;
		border-bottom-color: currentcolor;
		border-left-color: currentcolor;*/
		border-color: #8d95aa #66718c #424f6f;
		padding: .0625rem .5rem;
	}

	@media screen and (width < 31.25rem) { /* 500px */
		width: unset;
		float: none;
		margin: 0 auto;
	}
}

/* #region Boxes – .box, .list-box, .bigbox */
.box {
	padding: var(--6px) var(--10px);
	margin-bottom: 1rem;

	background-color: var(--clr-box-bg);
	box-shadow: 0 0 0 var(--1px) var(--clr-box-rim) inset;
	border-radius: var(--10px);
	/* transition: .75s; */

	border: var(--1px) solid var(--clr-box-border-sides);
	border-top-color: var(--clr-box-border-top);
	border-bottom-color: var(--clr-box-border-bottom);
	
	&.box-top { margin-bottom: .25rem; border-radius: var(--10px) var(--10px) 0 0; }
	&.box-middle { margin-bottom: .25rem; border-radius: 0; border-top-color: var(--clr-box-border-sides); }
	&.box-bottom { margin-bottom: 1rem; border-radius: 0 0 var(--10px) var(--10px); border-top-color: var(--clr-box-border-sides); }
	&.box-square { border-radius: 0; }

	&.list-box {
		padding: var(--10px);
		box-shadow: 0 0 0 var(--6px) var(--clr-tracklist-rim2) inset, 0 0 0 var(--1px) var(--clr-box-rim) inset;

		& > :first-child { margin-top: 0; }
		& > :last-child { margin-bottom: 0; }
	}

	&.narrow {
		margin-left: 2rem;
		margin-right: 2rem;
	}
}

.box-title {
	margin-bottom: 0;
	margin-left: .5rem;
	text-align: left;
	color: var(--clr-box-title);
}

.box-footer {
	margin-top: -1rem;
	margin-right: .5rem;
	color: var(--clr-box-title);
	text-align: right;
	margin-bottom: 1rem;
}


/* #region .bigbox – Big Boxes */
.bigbox-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}

.bigbox {
	background-color: var(--clr-hcn-bg);
	background-image: var(--bg-lines);
	padding: var(--10px) 1rem;
	width: 100%;
	box-sizing: border-box;
	
	text-align: left;
	
	border: var(--2px) solid var(--clr-hcn-border);
	/*box-shadow: 0 0 0 1px var(--clr-hcn-border2);*/
	box-shadow: 0 0 var(--2px) var(--2px) var(--clr-hcn-shadow);

	& > :last-child { margin-bottom: 0; }
		
}

@media screen and (width <= 30rem) { /* 480px */
	.bigbox-container {
		grid-template-columns: 1fr;
	}
}

@media (width > 30rem) { /* 480px */
	.bigbox:nth-child(2n - 1) {
		text-align: right;

		&:last-child {
			text-align: center;
			margin-left: 50%;
			margin-right: 50%;
		}
	}
}

/* #endregion */
/* #endregion */
/* #endregion */


/* #region CUSTOM ELEMENTS – Paranthesis, Spoilers, Hovercards */

p-t {
	color: var(--clr-pt); /*opacity: .6;*/
	transition: .15s color;

	&:hover {
		color: var(--clr-main);
	}
}

/* #region Spoilers <s-p> */
s-p {
	background-color: var(--clr-main);
	color: transparent;
	text-decoration-color: transparent;
	border-color: transparent;
	transition-property: background-color, color, text-decoration-color, border-color;
	transition-duration: .15s;
	/*padding: 0 5px;*/

	&:hover {
		background-color: hsla(from var(--clr-main) h s l / .1);
		color: inherit;
		border-color: inherit;
	}
}

s-p b, b s-p { color: transparent; }
s-p:hover b, b s-p:hover { color: var(--clr-bold); }

s-p p-t, p-t s-p { color: transparent; }
s-p:hover p-t, p-t s-p:hover { color: var(--clr-main); }

s-p a, a s-p { color: transparent; text-decoration-color: transparent; }
s-p:hover a, a s-p:hover { color: var(--clr-link); text-decoration-color: var(--clr-link); }


/*s-p:hover :is(b, a, kbd, code, p-t) {
	color: inherit;
	text-decoration-color: inherit;
	border-color: inherit;

	& b {
		color: var(--clr-bold);
	}
}*/

	s-p kbd, kbd s-p, s-p code, code s-p {
	background-color: transparent;
	border-bottom: 0;}

		s-p kbd:hover, kbd:hover s-p, s-p code:hover, code:hover s-p {
		background-color: inherit;
		border-bottom: inherit;}

	/*s-p a, a s-p {
	color: var(--clr-spoiler);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-style: double;}

		s-p a:hover, a s-p:hover {
		color: var(--clr-link-sp-hover);
		text-decoration-style: inherit;}*/
	
	s-p img {
	filter: brightness(0);
	transition: .2s;}

		s-p img:hover {
		filter: brightness(1);}

/* #endregion */
/* #region HOVERCARDS */
	/* #region VARIANT A – H-C & H-CN */
		/* #region h-c */
			h-c {
				/*background: linear-gradient(0deg, #267cc882 .8em, transparent .8em);*/

				background-image: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=267cc882);
				background-image: var(--bg-hc-idle);
				background-size: cover;
				background-repeat: round;

				box-decoration-break: clone;

				margin: -.125rem -.375rem;
				padding: .125rem .375rem;
				transition: background-image .3s;
				display: inline;
				
				cursor: help;

				&:hover {
					transition: background-image .7s;
					/*background: linear-gradient(0deg, #28ff214d .8em, transparent .8em);*/
					background-image: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=28ff214d);
					background-image: var(--bg-hc-hover);
				}

				/* Essentially inherit the positioning properties of headings */ 
				&:has(:is(h2,h3,h4,h5,h6,.vh2,.vh3,.vh4,.vh5,.vh6)) {
					margin-bottom: 1rem;
					margin-top: 1rem;
					width: 100%;
					display: block; /* Allow margin collapsing */
				}

				& :is(h2,h3,h4,h5,h6,.vh2,.vh3,.vh4,.vh5,.vh6) {
					margin: 0;
					padding: 0;
				}
			}
		/* #endregion */
		/* #region h-cn */
			h-cn {
				position: absolute;
				display: block; /* If I don't add this here, <h-c>'s with <h-cn> will have weird visuals when retracting from screen */
				
				font-size: 1rem;
				line-height: 1.5;

				/*display: none;*/
				color: var(--clr-main);
				opacity: 0;
				visibility: hidden;

				background-image: var(--bg-lines);
				background-color: var(--clr-hcn-bg);
				border: 2px solid var(--clr-hcn-border);
				background-position-y: -2px;

				left: -.625rem;
				max-width: var(--main-width);
				padding: .375rem .625rem;
				box-shadow: none;
				/*transform: rotate(-.05deg);*/
				/*width: 775px;*/
				width: calc(100% - 1.5rem); /* This is useful for sections like .album-group that are a bit wider than <main> */
				width: calc(100vw - calc(var(--page-padding) * 2));
				box-sizing: border-box;

				transition: ease-out .2s .1s;
				transition-property: opacity, left, visibility, box-shadow;
				cursor: default;

				background-position-x: -13px;

				text-align: left;
				z-index: 99;

				/*overflow-y: scroll;
				scrollbar-color: var(--clr-hcn-border);
				max-height: 400px;*/

				& > :first-child { margin-top: 0; }
				& > :last-child { margin-bottom: 0; }

				/* Border experiment*/
				/*border-top-color: var(--clr-box-border-top);
				//border-left-color: var(--clr-box-border-sides);
				//border-right-color: var(--clr-box-border-sides);
				//border-bottom-color: var(--clr-box-border-bottom);*/
			}

			:is(h-cn, .static-sn) {
				& img {
					width: unset;
					height: unset;
				}

				& :is(h2, h3, h4, h5, h6, .vh2, .vh3, .vh4, .vh5, .vh6, hr) {
					margin-left: 0;
					margin-right: 0;
				}

				& .title {
					margin: -.4rem -.7rem 0 -.7rem;
					padding: .25rem .6rem .25rem .6rem;
					/*margin: -5px -10px 4px -10px;*/
					
					font-size: 1.2rem;
					background-color: var(--clr-hcn-title-footer);
					font-weight: bold;
					/* border-radius: 0 0 100px 0; */

					& + * {
						margin-top: .4rem;
					}
				}

				& *:has(+ .footer) {
					margin-bottom: .4rem;
				}

				& .footer {
					margin: 0 -.7rem -.4rem -.7rem;
					padding: .25rem .6rem .25rem .6rem;

					background-color:  var(--clr-hcn-title-footer);
					color: rgba(from var(--clr-main) r g b / .6);
					font-style: italic;
					/* border-radius: 0 0 100px 0; */
					text-align: right;
				}
			}


			h-c:hover + h-cn, h-cn:hover, h-cn:focus-within, h-c:focus-visible + h-cn,
			h-c:has(a:focus-visible) + h-cn {
				/*display: block;*/
				opacity: 1;
				visibility: visible;
				
				left: 0px;
				/*box-shadow: 0 0 2px var(--clr-shadow);*/
				/*box-shadow: 0 0 0 1px var(--clr-shadow);*/
				box-shadow: 0 0 2px 2px var(--clr-hcn-shadow);
				transition: ease-out .2s .6s;
				transition-property: opacity, left, visibility, box-shadow;
				pointer-events: all;
			}

	.notes {
		position: relative;

		& + h-cn::after {
			content: "a";
			color: #0000;
	
			--snn-subpage-icon: url("/assets/site/notes.gif");
			background-image: var(--snn-subpage-icon);
			position: absolute;
			width: 59px;
			height: 54px;
			top: -15px;
			right: -20px;
	
			filter: drop-shadow(0 5px 5px black);
		}

		&.ase + h-cn::after {
			--snn-subpage-icon: url("/assets/site/ase.gif");
		}

		&.ase-folded + h-cn::after {
			--snn-subpage-icon: url("/assets/site/ase-folded.gif");
		}

		&.music + h-cn::after {
			--snn-subpage-icon: url("/assets/site/music.gif");
		}
	}

	.subpage {
		position: relative;
		
		& + h-cn::after {
			content: "a";
			color: #0000;
	
			background-image: url("/assets/site/subpage.gif");
			position: absolute;
			width: 59px;
			height: 54px;
			top: -15px;
			right: -20px;
	
			filter: drop-shadow(0 5px 5px black);
		}
	}

	/*h-c:has(a:focus) + h-cn, h-c:has(button:focus) + h-cn {
	display: block;
	left: 0px;
	filter: drop-shadow(0px 0px 8px var(--clr-shadow));
	box-shadow: 0 0 2px var(--clr-shadow);
	opacity: 1;
	z-index: 99;
	transition: ease-out .2s .2s;}*/

/* #endregion */
		/* #region .static-sn */
			.static-sn {
				background-image: var(--bg-lines);
				background-color: var(--clr-hcn-bg);
				border: 2px solid var(--clr-hcn-border);
				max-width: var(--main-width);
				padding: 5px 10px;
				box-shadow: 0 0 2px var(--clr-shadow);
				width: calc(100% - 25px); /* This is useful for sections like .album-group that are a bit wider than <main> */

				background-position-x: -13px;

				text-align: left;
				margin-bottom: 1rem;
				/*filter: drop-shadow(0 5px var(--clr-border));*/

				& > :last-child { margin-bottom: 0px; }
			}
		/* #endregion .static-sn */
	/* #endregion VARIANT A – H-C & H-CN */

	/* #region VARIANT B – details.hovercard */
	/* Inviable because of <p> tags automatically closing when using a <details> in them */
		details.hovercard {
			display: inline;
			background: red;

			/* Reset styles from details */
			border: none;
			padding: 0;
			border-radius: 0;

			& summary {
				display: inline;

				&::marker {
					display: none;
				}
			}
		}
	/* #endregion VARIANT B – details.hovercard */
/* #endregion HOVERCARDS */

/* #region HOVERCARD EXTRAS */
	h-cn .metadata {
		/*display: flex;
		flex-wrap: wrap;
		gap: .5rem;*/
		/*margin-bottom: 1rem;*/

		& div {
			display: inline;
			padding: .1rem .3rem;
			background: var(--clr-tag-button-bg);
			border: 1px solid var(--clr-tag-button-border);
			border-radius: 1rem 0 0 1rem;
			margin-right: .5rem;
			line-height: 2.25;
			box-decoration-break: clone;
		}

		& + * {
			margin-top: .5rem;
		}
	}
/* #endregion HOVERCARD EXTRAS */

.card {
	background-image: var(--bg-lines);
	background-color: var(--clr-hcn-bg);
	border: 2px solid var(--clr-hcn-border);
	background-position-y: -2px;
	
	padding: 5px 10px;
	box-shadow: 0 0 2px 2px var(--clr-hcn-shadow);
	
	text-align: left;

	/* Is awkward when you reach the edge, scroll further and then scroll the main page, causing your cursor to move off the sn */
	/* Breaks Notes on... image on top-right of hovercards */
	/*overflow-y: scroll;
	scrollbar-color: var(--clr-hcn-border);
	max-height: 400px;*/

	& > :first-child { margin-top: 0; }
	& > :last-child { margin-bottom: 0; }

	/* Border experiment*/
	/*border-top-color: var(--clr-box-border-top);
	//border-left-color: var(--clr-box-border-sides);
	//border-right-color: var(--clr-box-border-sides);
	//border-bottom-color: var(--clr-box-border-bottom);*/

	& .card-title {
		margin: -5px -10px 0 -10px;
		/*margin: -5px -10px 4px -10px;*/
		font-size: 1.2rem;
		padding: 4px 5px 4px 10px;
		background-color: var(--clr-hcn-title-footer);
		font-weight: bold;
		/* border-radius: 0 0 100px 0; */

		& + * { margin-top: 5px; }
	}

	& .card-footer {
		margin: calc(6px - 1rem) -10px -5px -10px;
		padding: 2px 5px 2px 10px;
		background-color:  var(--clr-hcn-title-footer);
		color: rgba(from var(--clr-main) r g b / .6);
		font-style: italic;
		/* border-radius: 0 0 100px 0; */
		text-align: right;
	}
}

.static-card {
	--color: var(--clr-sec-bg);
	text-align: left;

	border: 2px solid black;
	background-color: var(--color);
	background-image: var(--bg-lines) /*url("/assets/bg-grid-white.png")*/;

	display: inline-block;

	box-sizing: border-box;
	padding: 5px 10px;
	/* width: 370px;
	height: 300px; */
	margin: 7.5px;

	overflow-y: scroll;

	/*filter: drop-shadow(0px 6px 8px #000);*/
	/*transform: rotate(-.5deg);*/

	& > :last-child { margin-bottom: 0; }

	& h2, & h3 {
		font-size: 1rem;
		margin-top: 0;
		left: 0;
	
		width: 100%;
	}

	& h3 {
		left: 0;
		font-size: 1rem;
		margin-bottom: inherit;
	}

	scrollbar-color: gray transparent;
	&::-webkit-scrollbar {
		width: 4px;
		height: 4px;
		background-color: transparent;
	}
	&::-webkit-scrollbar-corner { 
		background-color: transparent;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background-color: gray;
	}
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}

	& date {
		filter: opacity(.7);
		float: right;
		clear: right;
	}
}

.tag {
	font-size: 1rem;
	padding: 0 5px;
	background-color: var(--clr-tag-button-inner-bg);
	border-radius: 5px;

	&.yellow {
		background-color: var(--clr-tag-yellow-bg);
		color: var(--clr-tag-yellow);
	}
	&.green {
		background-color: var(--clr-tag-green-bg);
		color: var(--clr-tag-green);
	}
	&.blue {
		background-color: var(--clr-tag-blue-bg);
		color: var(--clr-tag-blue);
	}
	&.red { 
		background-color: var(--clr-tag-red-bg);
		color: var(--clr-tag-red);
	}
}
/* #endregion */
/* #endregion */

















#top {
	position: absolute;
	top: 0;
}

#top-button {
	display: inline-block;
	width: 30px;
	height: 30px;
	font-size: 24px;
	text-decoration: none;
	border: 1px solid var(--clr-strikethrough-line);

	text-align: center;
}

.hover-shake:hover {
	--shake-intensity: 1.3deg;
	animation: hover-shake .2s ease-in-out;
}

@keyframes hover-shake {
	0% {
	transform: none;}

	33% {
	transform: rotate(-1.3deg);}

	66% {
	transform: rotate(1.3deg);}

	100% {
	transform: none;}
}

@keyframes shake-2 {
	0% { transform: none; }
	12.5% { transform: rotate(calc(var(--shake-intensity) * -1)); }
	37.5% { transform: rotate(calc(var(--shake-intensity) * .75)); }
	62.5% { transform: rotate(calc(var(--shake-intensity) * -.5)); }
	87.5% {	transform: rotate(calc(var(--shake-intensity) * .25)); }
	100% { transform: none; }
}

@keyframes shake-3 {
	0% { transform: none; }
	8.3% { transform: rotate(calc(var(--shake-intensity) * -1)); }
	25% { transform: rotate(calc(var(--shake-intensity) * .75)); }
	41.6% { transform: rotate(calc(var(--shake-intensity) * -.5)); }
	58.3% {	transform: rotate(calc(var(--shake-intensity) * .25)); }
	75% {	transform: rotate(calc(var(--shake-intensity) * -.125)); }
	91.6% {	transform: rotate(calc(var(--shake-intensity) * .0625)); }
	100% { transform: none; }
}

@keyframes shareable-shake {
	0% { scale: 1; transform: none; }
	0% { scale: 2; }
	12.5% { scale: 2; transform: rotate(calc(var(--shake-intensity) * -1)); }
	37.5% { scale: 2; transform: rotate(calc(var(--shake-intensity) * .75)); }
	62.5% { scale: 2; transform: rotate(calc(var(--shake-intensity) * -.5)); }
	87.5% {	scale: 2; transform: rotate(calc(var(--shake-intensity) * .25)); }
	100% { scale: 1; transform: none; }
}

/* #region INLINE LIST */
	:is(ul, ol).inline-list {
		padding-left: 0;
		padding-right: 0;

		> li {
			display: inline;
			margin-bottom: 0;

			&::marker {
				display: none;
			}
		}

		&.contains-link-buttons {
			text-align: center;

			& h-c {
				background: none;
				padding: 0;
				margin: 0;
			}
		}

		&.contains-shareables {
			text-align: center;
			image-rendering: pixelated;

			& > li {
				/*&:target h-c {
					position: relative;
					scrol5l-margin: 64px;

					&::after {
						content: ' ';
						position: absolute;
						width: 1000lvh;
						height: 1000lvh;
						display: block;
						top: calc(-500lvh + 4px);
						left: calc(-500lvh + 50%);
						background: radial-gradient(#0000 50px, #000000d8 100px);
						z-index: 100;
						pointer-events: none;

						animation: hc-spotlight 3s;
						animation-fill-mode: forwards;
					}
				}*/

				& > h-c {
					background: none;
					margin: 0;
					padding: 0;

					& > a {
						--hover: #0007;
						--hover2: var(--hover);
						position: relative;
						/* font-size: 0; */
						/* margin: 0 6px 0 0; */
					
						bottom: 0;
						/*border-bottom: 0px solid var(--hover);*/
						filter: drop-shadow(0 0 var(--hover));
						transition: .1s ease-in;
					
						display: inline-block;
						/* height: 31px; */

						&:hover, &:focus {
							transition: .1s ease-in;
							bottom: 2px;
							/*border-bottom: 2px solid var(--hover);*/
							filter: drop-shadow(0px 1px var(--hover)) drop-shadow(0px 1px var(--hover2));
							filter: drop-shadow(0px 2px var(--hover));
						}

						&:active {
							transition: .05s ease-in;
							bottom: 0px;
							filter: drop-shadow(0 0 var(--hover));
						}
					}
				}
			}
		}
	}
/* #endregion INLINE LIST */

/* #region Mobile CSS */
@media screen and (max-width: 43.75rem) { /* 700px */
	h1 {
		font-size: 1.75rem;
		/* margin-top: 1rem; */
		margin-bottom: .1rem; /*Before .5rem*/
		text-shadow: .125rem .125rem var(--clr-h1-dropshadow);
	}

	#title-subtitle {
		line-height: 1.25;
		font-size: .9rem;
	}

	#title-supertitle {
		margin-top: -.3rem;
		font-size: .9rem;
	}

	#nav-links { margin: 0 0 0 0; }
	#nav-current { margin: .25rem 0 1rem 0; }

	.summary {
		padding: .3rem 1rem;
		margin: 1rem .625rem;
	}

	#page-updated {
		height: 1rem;
		line-height: 1;
	}

	.box {
	margin-left: .5rem; margin-right: .5rem;}
}
/* #endregion */


/* #region Accessability Experimentation */
/*
main h-c:after { content: "🗈"; }
main a:after { content: "↗"; }
*/
/* #endregion */


/* #region Print View */
@media print {
	#nav-links { display: none; }
	button#theme-switcher { display: none; }

	.current {
		border-radius: .75rem;
		border: .0625rem solid black;
	}

	h-cn {
		display: inline;
		opacity: 1;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1.5;
		position: relative;
		left: 0;
		
		&::before {
			content: " (";
		}
	
		&::after {
			content: ")";
		}
	}

	details#table-of-contents {
		display: none;
	}

	.list-box { border: .125rem solid gray; }

	#page-updated::before { content: "Last updated: "; }
}
/* #endregion */