/* === CSS Variables for Theme Consistency === */
:root {
	/* Colors */
	--text-white: #ffffff;
	--text-grey: #C0BFBC;

	--bg: #1d1d20;
	--bg-hover: #2a2a2e;
	--bg-active: #36363b;

	--bg-bright: #2e2e32;
	--bg-bright-hover: #3a3a3f;
	--bg-bright-active: #47474c;

	--bg-brighter: #3b3f41;
	--bg-brighter-hover: #474b4d;
	--bg-brighter-active: #535759;

	--bg-dark: #131416;
	--bg-dark-hover: #1f2023;
	--bg-dark-active: #2b2c2f;

	--bg-bright-selected: #404044; /* intentionally slightly darker than bg-bright-active */
	--bg-bright-selected-hover: #4a4a4f;
	--bg-bright-selected-active: #58585e;

	--accent-blue: #3584e4;
	--accent-blue-hover: #1f71d0;
	--accent-blue-active: #165bb4;

	--accent-green: #3a944a;
	--accent-green-hover: #2f7a3d;
	--accent-green-active: #256030;

	--accent-red: #e62d42;

	--accent-yellow: #c88800;

	--accent-purple: #9141ac;

	--accent-teal: #2190a4;

	--accent-orange: #ed5b00;

	--accent-pink: #d56199;

	--accent-slate: #6f8396;

	/* Misc design */
	--scrollbar-color-thumb: grey;
	--scrollbar-color-track: transparent;
	--scrollbar-width: thin;
	--scrollbar-width-legacy: 8px;

	--br-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

	--markerhighlight: #e62d42;

	--border-width: 1px;

	--lg-radius: 6px;
	--sm-radius: 4px;

	--hover-transition: color 0.2s ease-out, background-color 0.2s ease-out, background 0.2s ease-out;

	--font-standard: 'AdwaitaSans', system-ui, sans-serif;
	--font-header: 'Crigence n Friends', monospace;
}

@media (prefers-color-scheme: light) {
	:root {
		--text-white: #000000;
		--text-grey: #5E5C64;

		--bg: #ffffff;
		--bg-hover: #f0f0f0;
		--bg-active: #e0e0e0;

		--bg-bright: #f5f5f5;
		--bg-bright-hover: #eaeaea;
		--bg-bright-active: #dfdfdf;

		--bg-brighter: #d4d4d4;
		--bg-brighter-hover: #c9c9c9;
		--bg-brighter-active: #bebebe;

		--bg-dark: #cccccc;
		--bg-dark-hover: #bfbfbf;
		--bg-dark-active: #b2b2b2;

		--bg-bright-selected: #d5d5d5; /* a notch darker than #dfdfdf */
		--bg-bright-selected-hover: #e0e0e0; /* blends with your existing bg-active */
		--bg-bright-selected-active: #eaeaea; 
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

@font-face {
	font-family: 'Crigence n Friends';
	src: url('fonts/crigence-n-friends.otf.woff2') format('woff2'),
			url('fonts/crigence-n-friends-truetype.ttf') format('truetype');
}

@font-face {
	font-family: 'AdwaitaSans';
	src: url('fonts/AdwaitaSans-Regular.woff2') format('woff2'),
			url('fonts/AdwaitaSans-Regular.woff') format('woff'),
			url('fonts/AdwaitaSans-Regular.ttf') format('truetype');
}

html {
	height: 0;

}

body {
	color: var(--text-white);
	background: var(--bg);
	font-family: var(--font-standard);
	font-size: 100%;
	min-width: 300px;
	padding: 0.5em;
	scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track) !important;
	scrollbar-width: var(--scrollbar-width) !important;

	/* Scrapped "focus" animation, kept because it's really easy to re-enable and kinda cool. Uncomment this and the "body:hover" to re-enable the effect site-wide.
	opacity: 0;
	transition: opacity 0.4s ease;*/
}

	/*body:hover { opacity: 1; }*/

@supports selector(::-webkit-scrollbar) {
	body::-webkit-scrollbar-thumb {
		background: var(--scrollbar-color-thumb) !important;
	}
	body::-webkit-scrollbar-track {
		background: var(--scrollbar-color-track) !important;
	}
	body::-webkit-scrollbar {
		max-width: var(--scrollbar-width-legacy) !important;
		max-height: var(--scrollbar-width-legacy) !important;
	}
}

p {
	color: var(--text-white);
	font-size: 14px;
	line-height: 1.2;
	padding: 4px 8px;
}

sm {
	font-size: 7px;
}

br {
	min-height: 10px;
}

hr {
	width: 90%;
	height: 0;
	margin: auto;
	border: var(--border-width) solid var(--bg-brighter);
}

h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}

h1 {
	letter-spacing: 1px;
	font-size: 100%;
	margin: 5px 0;
}

h1 { font-family: var(--font-standard); font-size: 1.5em; margin: 5px 0; }
h2 { font-family: var(--font-standard); font-size: 1.3em; }
h3 { font-family: var(--font-standard); font-size: 1.1em; }
h4 { font-family: var(--font-standard); font-size: 1em; }

	a:visited {
		color:	#C061CB;
		transition: var(--hover-transition);
	}

	a:visited:hover {
		color:	var(--text-white);
	}

	a:link {
		color:	#62A0EA;
		transition: var(--hover-transition);
	}

	a:link:hover {
		color:	var(--text-white);
	}

::selection {
	background: var(--accent-blue);
	color: var(--text-white);
}

	/* For keyboard/accessibility users */
	:focus-visible {
		outline: 2px solid var(--accent-blue);
		outline-offset: 2px;
		transition: outline-color 0.2s ease-in-out;
	}

	:focus:not(:focus-visible) {
		outline: none;
	}

img {
	display: block;
	max-width: 100%;
	height: auto;
	line-height: 0;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea,
form select {
	background-color: var(--bg-bright);
	color: var(--text-white);
	border: var(--border-width) solid var(--bg-brighter);
	border-radius: var(--sm-radius);
	padding: 0.5em;
	width: 100%;
	font-family: var(--font-standard);
	font-size: 1em;
	margin-bottom: 0.75em;
	box-sizing: border-box;
}

form input[type="submit"],
form button[type="submit"] {
	background-color: var(--accent-green);
	color: var(--text-white);
	border: none;
	border-radius: var(--sm-radius);
	padding: 0.5em 1em;
	cursor: pointer;
	font-family: var(--font-standard);
	transition: var(--hover-transition);
}

form input[type="submit"]:hover,
form button[type="submit"]:hover {
	background-color: var(--accent-green-hover);
}

form input[type="submit"]:active,
form button[type="submit"]:active {
	background-color: var(--accent-green-active);
}

.center-text { text-align: center }

strong { font-weight: bold }

/* Rainbow text effect */
.rainbow {
	display: inline-block;
	background-image: repeating-linear-gradient(
		to right,
		red, orange, yellow, green, blue, indigo, violet, red, orange, yellow, green
	);
	background-size: 500% 100%;
	background-position: 0% 50%;
	animation: rainbowShift 6s linear infinite;

	animation-name: rainbowShift, rainbowColorCycle;
	animation-duration: 6s, 5s;
	animation-timing-function: linear, linear;
	animation-iteration-count: infinite, infinite;

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: red;

	line-height: inherit;
	text-indent: 0;
	/* letter-spacing: .25em;	Not a bad idea, but doesn't work as well on long strings of text */
}

/* Background animation for gradient */
@keyframes rainbowShift {
	0%	 { background-position: 0% 44%; }
	100% { background-position: 88% 44%; }
}

/* Text color animation for fallback */
@keyframes rainbowColorCycle {
	0%	 { color: red;			background-color: red;}
	16%	{ color: orange;	background-color: orange;}
	32%	{ color: yellow;	background-color: yellow;}
	48%	{ color: green;	background-color: green;}
	64%	{ color: blue;		background-color: blue;}
	80%	{ color: violet;		background-color: violet;}
	100% { color: red;		background-color: red;}
}


	/* === Layout === */


#sidebar {
	background: var(--bg-bright);
	min-width: 135px;
	max-width: 40vw;		/* The content panel deserves *at least* the majority */	
	width: 20%;					/* This is just the default width & what's used if Javascript is disabled */
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	container-type: size;		/* Used for conditionally replacing the network locations section with a nav button */
	container-name: sidebar;
	box-shadow: var(--br-shadow);

	order: -1;
}

/* === Logo(s) === */

#logo-link {
	text-decoration: none;
	margin: 0.4em 0.2em;
	align-items: center;
	border-radius: 5px;
}
	#logo-link:hover { background: var(--bg-bright-hover); }
	#logo-link:active { background: var(--bg-bright-active); }

/* Default: use image logo only */
.logo-img {
	max-width: 240px;
	width: 90%;
	height: auto;
	max-height: 30vh;
	margin: .4em auto;
}

@media (prefers-color-scheme: light) {
	#sidebar #logo-link .logo-img {
		content: url('img/logo-light.svg');
	}
}

/* === Nav bar === */

.nav {
	overflow-y: auto;
	flex-shrink: 0;
	flex-grow: 0;
}

	.nav ul {
		list-style: none;
		padding: 0;
		margin: 0.4em 0.2em;
		display: flex;
		flex-direction: column;
		gap: 0.2em;
	}

	.nav li { width: 100%;	}

	.nav a {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		gap: 0.2em;
		width: 100%;
		color: var(--text-white);
		text-decoration: none;
		padding: 0.4em 0.8em;
		border-radius: 5px;
		font-weight: bold;
		line-height: 1.1;
		/*text-align: justify;
		text-justify: inter-character;	Failed experiment. I might bring this back later when it's more widely supported. */
		transition: var(--hover-transition);
	}
	.nav a:hover { background: var(--bg-bright-hover); }
	.nav a:active { background: var(--bg-bright-active); }

	.nav a.active { background: var(--bg-bright-selected); }
	.nav a.active:hover { background: var(--bg-bright-selected-hover); }
	.nav a.active:active { background: var(--bg-bright-selected-active); }

	.nav a::before {
		content: '';
		display: inline-block;
		width: 1em;
		height: 1em;
		background-size: 100% 100%;	/* "100% 100%" works more consistently than "contain" */
		background-repeat: no-repeat;
		margin-right: 0.4em;
		flex-shrink: 0;
	}

	.nav a[href*="blog.html"]::before { background-image: url('img/screaming-void-white.svg'); }
	.nav a[href*="projects.html"]::before { background-image: url('img/projects-white.svg'); }
	.nav a[href*="links.html"]::before { background-image: url('img/link-white.svg'); }
	.nav a[href*="webring.html"]::before { background-image: url('img/tab-white.svg'); }

		@media (prefers-color-scheme: light) {
			.nav a[href*="blog.html"]::before { background-image: url('img/screaming-void.svg'); }
			.nav a[href*="projects.html"]::before { background-image: url('img/projects.svg'); }
			.nav a[href*="links.html"]::before { background-image: url('img/link.svg');	}
			.nav a[href*="webring.html"]::before { background-image: url('img/tab.svg'); }
		}

	.nav .network-link /* Hidden by default */ {
		display: none;
	}

	@container sidebar (max-height: 400px) /* Unhide when vertically cramped. Use !important to override the iframe check */ {
		#network-locations { display: none !important; }
		#network-locations-iframe { display: none !important; }
		#network-locations-hr { display: none !important; }
		.nav .network-link {
			display: flex;
			align-items: center !important;
			justify-content: center !important;
			text-align: center !important;
		}
	}

	/* === Horizontal Sidebar Icon Grid Fallback === */
	@media (min-width: 601px) {
		@container sidebar (max-height: 200px) {
			.nav ul {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(2.5em, 1fr));
				gap: 0.4em;
				padding: 0.4em;
				justify-items: center;
			}
			.nav li { width: 100%; }
			.nav a {
				justify-content: center;
				padding: 0.5em;
			}
			.nav a span { display: none; }
			.nav a::before { margin-right: 0; }
		}
	}

	/* === Vertical Sidebar Icon-Only Fallback === */
	@media (max-width: 600px) {
		@container sidebar (max-width: 350px) {
			.nav ul {
				width: 100% !important;
				justify-content: center;
				gap: 0 1% !important;
			}
			.nav a span { display: none; }
			.nav a {
				justify-content: center;
				margin-left: auto;
				margin-right: auto;
				width: max-content;
				padding: 0.5em;
			}
			.nav a::before {
				margin-right: 0;
			}
		}
	}

/* === Network locations === */

#network-locations {
	flex: 0 1 auto;				/* allow shrinking in the column layout */
	min-width: 0;
	height: auto;
	overflow-y: auto;
	padding: 0.5em;
}

.network-header {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	text-align: center;
	margin: 0 0 .5em 0;
}

	.network-header h3 {
		margin: 0;
		flex: 0 1 auto;
		min-width: 0;
	}

	/*.network-header .info-box {
		flex: 0 0 auto;	stay small unless forced to wrap 
	}*/

.info-box {
	font-size: 12px;
	flex: 0 1 auto;
	max-width: 100%;
	color: var(--text-white);
	font-family: var(--font-standard);
}

/* === Info button (summary) === */
.info-box summary {
	list-style: none; /* nukes marker on Firefox/older WebKit */
	/* display: inline-block; helps normalize box size */
	cursor: pointer;
	background-color: var(--bg-brighter);
	color: var(--text-white);
	vertical-align: middle;
	white-space: nowrap;
	padding: 6px;
	margin: 0;
	border-radius: var(--lg-radius);
	box-shadow: var(--br-shadow);
	transition: var(--hover-transition);
	text-align: center;
	font-size: 1.1em;
}

/* Native triangle suppression (WebKit, Chromium, etc.) */
.info-box summary::-webkit-details-marker,
.info-box summary::marker {
	display: none;
}

/* Fallback icon: shown when browser supports ::before */
.info-box summary::before {
		content: '';
		display: inline-block;
		width: 1em;
		height: 1em;
		background-image: url('img/info-white.svg'); /* Your Adwaita-style SVG */
	background-size: 100% 100%;	/* "100% 100%" works more consistently than "contain" */
		background-repeat: no-repeat;
		vertical-align: middle;
}

/* Interaction states */
.info-box summary:hover { background-color: var(--bg-brighter-hover); }
.info-box summary:active { background-color: var(--bg-brighter-active); }

.info-box[open] summary { border-radius: var(--lg-radius) var(--lg-radius) 0 0; }
.info-box[open] p { border-radius: 0 0 var(--lg-radius) var(--lg-radius); }

@media (prefers-color-scheme: light) {
	.info-box summary::before { background-image: url('img/info.svg'); /* Your Adwaita-style SVG */ }
}

/* === Reveal panel === */
.info-box p {
	display: block;
	background: var(--bg);
	color: var(--text-white);
	border-radius: var(--lg-radius);
	padding: 10px;
	margin: 0;
	box-shadow: var(--br-shadow);
	box-sizing: border-box;
	word-break: break-word;
	font-size: 0.95em;
	line-height: 1.4;
	max-width: 100%;
}

.links {
	display: block;
	margin: auto;
}

	.links img {
		width: 100%;
		max-width: 240px;
		aspect-ratio: 4 / 1;
		border-radius: var(--sm-radius);
		box-shadow: var(--br-shadow);
		transition: filter 0.2s ease-out;
	}
	.links img:hover { filter: brightness(110%); }
	.links img:active { filter: brightness(125%); }

#links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: .5em;
	justify-items: center;
}

/* === Responsive wrap fallback === */

/* — modern: container-queries — */
@supports (container-type: size) {
	@container sidebar (max-width: 208px) {
		.network-header {
			flex-direction: column;
			align-items: stretch;
		}

		.network-header .info-box { flex: 1 1 auto; }

	.network-header .info-box summary::after {
		content: "Read more";
		margin-left: 0.4em;
		font-size: 0.9em;
		font-weight: bold;
		line-height: 1;
		color: var(--text-white);
		white-space: nowrap;
	}
	}
#network-locations-iframe { display: none; }
#network-locations { display: block; }
}

/* — old‐browser fallback: media‐query — */
@supports not (container-type: size) {
	@media (max-width: 220px) {
		.network-header {
			flex-direction: column;
			align-items: stretch;
		}

		.network-header .info-box { width: 100%; }

	.network-header .info-box summary::after {
		content: "Read more";
		margin-left: 0.4em;
		font-size: 0.9em;
		font-weight: bold;
		line-height: 1;
		color: var(--text-white);
		white-space: nowrap;
	}
	}
#network-locations-iframe { display: block; }
#network-locations { display: none; }
}

/* === Soundtrack === */

/* container flex */
#soundtrack {
	display: flex;
	/*min-height: 30px;*/
	max-height: 2em;
	flex-direction: row;
	flex-grow: 0;
	gap: 0.5em;
	padding: .5em;
	margin-top: auto;
	background: var(--bg-dark);
	/*border-top: 1px solid var(--bg-bright);*/
	color: var(--text-white);
	font-family: var(--font-standard);
	font-size: 0.9em;
	position: relative;
}

	#soundtrack button {
		min-width: 2em;
		background: var(--bg-brighter);
		border: none;
		color: var(--text-white);
		border-radius: var(--sm-radius);
		padding: .5em .45em .4em .45em;
		cursor: pointer;
		font-size: 1em;
		letter-spacing: 0;
		word-spacing: 0;
		line-height: 1;
		text-wrap: nowrap;	/* For Gnome Web */
		transition: var(--hover-transition);
	}
	#soundtrack button:hover { background: var(--bg-brighter-hover); }
	#soundtrack button:active { background: var(--bg-brighter-active); }

	#soundtrack button img {
		width: 1em;
		height: 1em;
		display: block;
		margin: auto;
		pointer-events: none;
	}

	#soundtrack details {
		display: flex;
		width: 100%;
		padding: 0;
		margin: 0;
		flex-direction: column;
		white-space: nowrap;
		/*padding: 0.4em;*/
		border-radius: var(--sm-radius);
		transition: var(--hover-transition);
		color: var(--text-white);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#soundtrack summary {
		display: flex;
		height: 100%;
		margin: 0;
		padding: 0;
		align-items: center;
		justify-content: flex-start;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex-wrap: nowrap;

		list-style: none;
		outline: none;
		cursor: pointer;
		line-height: 1;
		transition: var(--hover-transition);
	}
	#soundtrack summary::-webkit-details-marker { display: none; }
	#soundtrack summary:hover { background: var(--bg-dark-hover); }
	#soundtrack summary:active { background: var(--bg-dark-active); }
	#soundtrack #audio-info[open] summary {
		border-radius: var(--sm-radius) var(--sm-radius) 0 0;

		height: min-content;
	}

	#soundtrack summary span{
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#soundtrack #audio-artist {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		gap: 0.4em;
		overflow: visible;
		white-space: nowrap;
		text-overflow: ellipsis;

		width: 100%;
		height: min-content;
		font-size: 0.8em;
		line-height: 1.1em;
		color: var(--text-grey);

		transition: var(--hover-transition);
	}
	#soundtrack #audio-artist:hover { background: var(--bg-dark-hover); }
	#soundtrack #audio-artist:active { background: var(--bg-dark-active); }
	#soundtrack #audio-info[open] div {
		border-radius: 0 0 var(--sm-radius) var(--sm-radius);

		cursor: pointer;
	}

	.artist-name {
		flex: 1;
		overflow-x: hidden;
		overflow-y: visible;
		text-overflow: ellipsis;
	}

	.link-icon {
		flex-shrink: 0;
		opacity: 0.75;
	}

	#audio-progress {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 4px;
		width: 100%;
		background: var(--bg-brighter);
		cursor: pointer;
		opacity: 0;
	}
	#soundtrack #audio-info[open] ~ #audio-progress {
		opacity: 1;
		background: linear-gradient(to right,
			var(--text-white) var(--progress, 0%),
			transparent var(--progress, 0%));
	}

#resizer {
	width: 0.4%;			
	min-width: 0.5em;	/* Ensures that the resizer is always grabbable */
	background: var(--bg-brighter);
	cursor: ew-resize;
	position: relative;	/* So the ::before icon can position itself absolutely */
	transition: var(--hover-transition);
}
	#resizer:hover { background: var(--bg-brighter-hover); }
	#resizer:active { background: var(--bg-brighter-active); /* if this actually appears the drag overlay isn't working lmao */ }

#resizer::before {
	content: '≡';
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* This is the magic */
	top: 45vh;

	color: var(--text-white);
	font-size: 1.2em;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	pointer-events: none;
}
#resizer:hover::before { opacity: 0.8; }

#drag-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	z-index: 9999;				/* Rise above everything and rule as a god */
	cursor: ew-resize;
	pointer-events: none;		/* default state */
}

#iframe {
	flex: 1;
	height: 100vh;
	overflow: hidden;
}

	#iframe iframe {
		width: 100%;
		height: 100%;
		border: none;
	}

/* Sidebar fully hidden */
#sidebar.collapsed { display: none; }

#resizer.collapsed {
	left: 0; /* stays pinned to the edge */
	min-width: 1em;
}

/* Switch to dynamic viewport height units if they're supported so mobile browsers stop being pissy */
@supports (height: 100dvh) {
	#sidebar {
		height: 100dvh;
	}

	#iframe {
		height: 100dvh;
	}
}

/* Switch to a horizontal sidebar layout for mobile/slim aspect ratios. Loads after the previous check to prevent bugs */
@media (max-width: 600px) {
	body { flex-direction: column; }

	#sidebar {
		width: 100vw;
		height: auto;
		min-height: 4em;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		max-width: none;
		align-items: center;
	}

	#sidebar hr { display: none; }
	
	#logo-link {
		margin: auto;
		margin-left: 0.15em;
	}

	.logo-img {
		width: auto;
		max-height: 2em;
		padding: .2em;
		margin: 0;
	}

	.logo-text {
		width: 100%;
		padding: .3em .25em .3em .3em;
		margin: auto;
		margin-inline: auto;
		text-align: left;
	}
	/* Hide resizer for horiz'/mobile sidebar; we don't need it */ 
	#resizer { display: none;}

	/* Hide the iframe panel for network locations and replace it with the button */
	#network-locations { display: none; }
	.nav .network-link { display: flex; }

	.nav {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		align-items: center;
		height: 100%;	/* Ensures consistent height */
	}

	.nav-scroll {
		overflow-x: auto;
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;

		padding: 0 .8em;

		mask-image: linear-gradient(to right,
			transparent 0%,
			black 5%,
			black 95%,
			transparent 100%);
		mask-size: 100% 100%;
		mask-repeat: no-repeat;

		-webkit-mask-image: linear-gradient(to right,
			transparent 0%,
			black 5%,
			black 95%,
			transparent 100%);
	}

	.nav-scroll::-webkit-scrollbar { display: none; }
	.nav-scroll {
		scrollbar-width: none;		/* Firefox */
		-ms-overflow-style: none;	/* Edge/IE */
	}

	.nav ul {
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		width: max-content;
		height: 100%;
		box-sizing: border-box;
		gap: 0;
		padding: 0em;
		margin: 0;
	}
	
	.nav li {
		flex: 0 1 auto;
		width: auto;
	}
	
	.nav a {
		justify-content: flex-start;
		padding: 0.4em 0.6em;

		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 100%;
	}

	.logo-img,
	.logo-text {
		max-width: none;
		font-size: 1.5rem;
		flex-shrink: 0;
	}

	#soundtrack {
		height: 100%;
		max-height: 100%;
		flex-shrink: 0;
		margin-left: auto;
		padding: 0.3em;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	#soundtrack button {
		font-size: 1.1em;
		padding: .5em .3em .35em .3em;
		border-radius: var(--lg-radius);
	}

	#soundtrack #audio-info { display: none; }

	#iframe {
		width: 100%;
		height: 100%;
	}
}


	/* === UI ELEMENTS === */


.page-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bg-bright);
	color: var(--text-white);
	padding: 0.5em 1em;
	border-bottom: var(--border-width) solid var(--bg-bright);
	border-radius: var(--lg-radius);
	font-family: var(--font-standard);	/* Inherit or override? Up to you */
	gap: 0.5em;										/* Slight spacing between elements */
}

/* Centered, scale-friendly title */
.page-bar h1 {
	flex: 1;
	text-align: center;
	margin: 0;
	font-size: 1.5em;
	font-weight: bold;
	font-family: var(--font-header);
	overflow: hidden;
	text-transform: titlecase;
	text-overflow: ellipsis;
	white-space: nowrap;
}

		/* Button + link base */
		.page-bar button,
		.page-bar a {
			min-width: 30px;
			min-height: 25.5px;
			background-color: var(--bg-brighter);
			border: none;
			padding: 0.3em 0.6em;
			border-radius: var(--lg-radius);
			box-shadow: var(--br-shadow);
			cursor: pointer;
			transition: var(--hover-transition);
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			box-sizing: border-box;
		}

		/* Back + RSS icons */
		.page-bar button img,
		.page-bar .rss-button img {
			height: 1em;
			width: 1em;
			min-width: 16px; /* optional: absolute floor to avoid tiny rendering */
			min-height: 16px;
			display: block;
		}

		/* Interaction states */
		.page-bar button:hover, .page-bar a:hover { background-color: var(--bg-brighter-hover) }
		.page-bar button:active, .page-bar a:active { background-color: var(--bg-brighter-active) }

		/* Light mode overrides */
		@media (prefers-color-scheme: light) {
			#nav-back img { content: url('../img/back.svg') }
			.page-bar .rss-button img { content: url('../img/rss.svg') }
		}

.welcome-container {
	max-width: 800px;
	margin: 2em auto;
	padding: 0 1em;
}

.welcome-list {
	margin: 1em auto;
	padding-left: 1.5em;
	line-height: 1.5;
}

#neocities-link {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}

	#neocities-link img {
		height: auto;
		width: 150px;
		max-width: 100%;
		transition: filter 0.2s ease-out;
	}
	#neocities-link img:hover { filter: brightness(110%); }
	#neocities-link img:active { filter: brightness(125%); }

/* === Cards === */
.card,
.smallcard,
.altcard {
	position: relative;
	display: flex;
	width: 90%;
	color: var(--text-white);
	background: none;
	border: var(--border-width) solid var(--bg);
	box-shadow: var(--br-shadow);
	border-radius: var(--lg-radius);
	cursor: pointer;
	overflow: hidden;
	text-decoration: none;
}

.smallcard {
	justify-content: space-between;
	align-items: center;
	font-size: 0.95rem;
}

.card::before,
.smallcard::before,
.altcard::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--bg-bright);
	transition: var(--hover-transition);
	z-index: -1;
}

.card:hover::before,
.smallcard:hover::before,
.altcard:hover::before {
	background-color: var(--bg-bright-hover);
}

.card:active::before,
.smallcard:active::before,
.altcard:active::before {
	background-color: var(--bg-bright-active);
}

.card > *,
.smallcard > *,
.altcard > * {
	position: relative;
	z-index: 1;
}

/* === CARD-SPECIFIC === */
.card { align-items: stretch; }

.card-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0;
	flex: 1;
}

.card-content p {
	margin: auto;
	padding: 0.3em;
	font-weight: bold;
	font-size: 2em;
	text-align: center;
}

.card-content .card-info {
	padding: 0.4em;
	margin: 0;
	font-size: 1em;
	font-weight: normal;
	background-color: var(--bg-bright);
	border-top: var(--border-width) solid var(--bg);
	border-radius: 0 0 var(--lg-radius) 0;
	transition: var(--hover-transition);
}
.card:hover .card-info { background-color: var(--bg-bright-hover); }
.card:active .card-info { background-color: var(--bg-bright-active); }

.thumb-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 10em;
	aspect-ratio: 16 / 9;
	min-height: 80px;
	position: relative;
	border-right: var(--border-width) solid var(--bg);
	border-radius: var(--lg-radius) 0 0 var(--lg-radius);
	background-color: var(--bg-bright);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.thumb-container::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bg, url('img/logo.png'));
	background-color: var(--bg-bright);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(15px) brightness(0.9);
	transform: scale(1.1);
	z-index: 0;
}

.thumb-container img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	filter: drop-shadow(0 0 1px var(--bg-bright));
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	overflow: hidden;
	vertical-align: middle;
}

/* === SMALLCARD-SPECIFIC === */
.smallcard-title {
	flex: 1;
	text-align: left;
	font-weight: bold;
	padding: 0.4em;
}

.smallcard-info {
	white-space: nowrap;
	font-size: 0.9em;
	font-weight: normal;
	min-width: 20%;
	height: 100%;
	padding: 0.4em 1em;
	margin: 0;
	background-color: var(--bg-bright);
	border-left: var(--border-width) solid var(--bg);
	border-radius: 0 var(--lg-radius) var(--lg-radius) 0;
	transition: var(--hover-transition);
}

.smallcard *,
.smallcard:link,
.smallcard:visited {
	color: inherit;
}

.smallcard:hover .smallcard-info { background-color: var(--bg-bright-hover); }
.smallcard:active .smallcard-info { background-color: var(--bg-bright-active); }

/* === ALTCARD-SPECIFIC === */
.altcard {
	flex-direction: column;
}

.altcard-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	padding: 0.6em;
}

.altcard-top img {
	height: 50px;
	width: 50px;
	/* aspect-ratio: 1 / 1; */
	object-fit: contain;
	flex-shrink: 0;
	border-radius: var(--sm-radius);
	padding: 5px;
}

.altcard-title {
	font-size: 2em;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-align: center;
	white-space: nowrap;
}

.altcard-info {
	font-size: 1em;
	font-weight: normal;
	background-color: var(--bg-bright);
	border-top: var(--border-width) solid var(--bg);
	border-radius: 0 0 var(--lg-radius) var(--lg-radius);
	padding: 0.4em;
	margin: 0;
	text-align: center;
	transition: var(--hover-transition);
}
.altcard:hover .altcard-info { background-color: var(--bg-bright-hover); }
.altcard:active .altcard-info { background-color: var(--bg-bright-active); }

/* === Responsive layout === */
@media (max-width: 560px) {
	.card {
		flex-direction: column;
	}

	.thumb-container {
		width: 100%;
		height: 150px;
		border-right: none;
		border-bottom: var(--border-width) solid var(--bg-bright);
		border-radius: var(--lg-radius) var(--lg-radius) 0 0;
	}

	.card-content .card-info { border-radius: 0 0 var(--lg-radius) var(--lg-radius); }
}

@media (max-width: 200px) {
	.altcard-top { flex-direction: column; }

	.altcard-title { font-size: 1.5em; }

	.altcard-top img {
		width: 100%;
		height: 100px;
		object-fit: contain;
		border-bottom: 1px solid var(--bg-bright);
	}

	.altcard-info { border-radius: 0 0 var(--lg-radius) var(--lg-radius); }
}

.sectionheader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: auto;
	width: fit-content;
	line-height: 1; /* ensures no accidental space from font line metrics */
}

	.sectionheader img {
		height: 18px;
		width: auto;
		display: inline-block;
		vertical-align: middle;
		/* transform: translateY(1px); */
	}

	.sectionheader h3 {
		font-size: 18px;
		margin: 0;
		padding: 0;
		line-height: 1;
		vertical-align: middle;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

@media (prefers-color-scheme: light) {
	.sectionheader	img {
		filter: invert(1) hue-rotate(180deg);
	}
}

/* Failed attempt at replacing <center>. Keeping it just in-case.
.centered {
	text-align: center;
	display: block; /* fallback-safe 
	max-width: 100%;
}

	.centered > * {
		margin-left: auto;
		margin-right: auto;
	} */

.understated {
	font-weight: thin;
	font-size: 12px;
	color: var(--text-grey);
	margin: 0;
}

/* === Blog posts layout === */

	.post p {
		margin: 0 5%;
		padding: 0 0 0.5em 0;
		line-height: 1.5;
		text-align: justify;
		text-indent: 1.5em;
		overflow-wrap: wrap;
		hyphens: auto;
	}

	.post h1, .post h2, .post h3, .post h4, .post h5 {
		margin: 0 5%;
		padding: 0 0 0.5em 0;
		line-height: 1.5;
		text-indent: 3em;
	}

	.post hr {
		margin: .75em 5% 1em 5%;
	}

	.post ol, .post ul {
		margin: 0 5%;
		padding: 0;
		font-size: 14px;
		line-height: 1.5;
		text-align: justify;
		text-indent: 0;
	}

		.post li {
			margin: 0 0 0.25em 0;
		}

	/* Container for embedded content */
	.post .embed {
		width: 15rem;
		height: auto;
		margin: 2px 5% auto .5em;
		padding: 0;
		float: right;
		box-sizing: border-box;
		/* border: var(--border-width) solid var(--text-white);	failed effect */
		border-width: 0 var(--border-width) 0 0;
		border-radius: var(--lg-radius);
		box-shadow: var(--br-shadow);
		transition: all 0.3s ease-out;
		cursor: pointer;
		overflow: hidden;

		display: inline-block;
		vertical-align: top;
		white-space: normal;
	}

	/* Alternate float direction for every second embed */
	.post .embed:nth-child(even of .embed) {
		float: left;
		margin: 2px .5em auto 5%;
		/* border-width: 0 0 0 var(--border-width); */
	}

	/* Hover effect for visual feedback */
	.post .embed:hover { filter: brightness(110%); }

	/* Focus state for accessibility or click-to-expand */
	.post .embed:focus-within,
	.post .embed:focus {
		width: 90%;
		margin: auto 5% 1em 5%;
		border-width: 0;
		border-radius: var(--sm-radius);
		filter: brightness(100%);
		cursor: auto;
		display: block;
		/*float: none;*/
	}

	/* Disable hover effect if embed contains an iframe */
	.post .embed:has(iframe):hover {
		filter: none;
		cursor: default;
	}

	/* Ensure embedded images and iframes scale correctly */
	.post .embed img,
	.post .embed iframe {
		display: block;
		width: 100%;
		height: 100%;
		max-width: 100%;
		border: none;
		object-fit: contain;
	}

	/* When video is playing, expand and style differently */
	.post .embed.playing {
		width: 90%;
		margin: auto 5% 1em 5%;
		border: 2px dashed var(--accent);
		border-radius: 5px;
		box-shadow: 0 0 10px var(--accent);
		transform: scale(1.01);
	}

	/* I only use iframes for YouTube videos, and most YouTube videos are 16:9, so let's adapt for that. */
	.post .embed iframe { aspect-ratio: 16 / 9; }

	/* === <details> summary box styling === */
	.post details {
		border: 2px solid var(--bg-bright);
		border-radius: var(--lg-radius);
		box-shadow: var(--br-shadow);
		margin: 1em 5%;
		overflow: hidden;
		background-color: var(--bg-dark);
		transition: all 0.3s ease-out;
	}

	/* Clickable summary bar */
	.post summary {
		cursor: pointer;
		background-color: var(--bg-bright);
		padding: 0.75em 1em;
		font-weight: bold;
		user-select: none;
		display: block;
		transition: var(--hover-transition);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.post summary:hover { background-color: var(--bg-bright-hover); }
	.post summary:active { background-color: var(--bg-bright-active); }

	.post details p {
		margin: 0.75em 1.25em;
		text-indent: 0;
		line-height: 1.5;
	}

	.post details ol,
	.post details ul {
		margin: 0.5em 2em 1em 2.5em;
		padding: 0;
		text-align: justify;
	}

	.post details li {
		margin-bottom: 0.4em;
	}

	/* Optional: Responsive fallback for small screens */
	@media (max-width: 560px) {
		.post .embed,
		.post .embed:nth-of-type(even) {
			float: none;
			display: block;
			margin: 1em auto;
			width: 90%;
			pointer-events: none;		/* Disables hover and click interactivity; redundant */

			border-width: 0;
			border-radius: 5px;
		}
	}

.quote {
	border-left: 2px solid var(--text-white);
	margin: 0 5% 0.5em 5%;
}

	.quote p {
		text-indent: 0;
		padding: 0.25em 0;
		margin: 0 1em
	}

.highlight {
	color: #57E389;
	transition: var(--hover-transition);
}
	.highlight:hover {	color:	var(--text-white); }

.markerhighlight-container { display: inline-block; }

	.markerhighlight-container, .markerhighlight-container span {
		position: relative;
		color:	var(--text-white) !important;
		text-decoration: none;
		word-wrap: break-word;
		overflow-wrap: break-word
	}

.markerhighlight-container:before {
	content: " ";
	display: block;
	height: 90%;
	width: 100%;
	margin-left: -3px;
	margin-right: -3px;
	position: absolute;
	background: var(--accent-blue);
	opacity: 0.33;
	transform: rotate(.5deg);
	top: -5px;
	left: -1px;
	border-radius: 20% 25% 20% 24%;
	padding: 8px 3px 3px 8px;
	transition: var(--hover-transition);
}

	.markerhighlight-container:hover::before {
		background-color: black
	}

/* HCB comments were removed because they didn't function right, so now I have to use this instead. */

#temp_comment_box {
	background-color: var(--bg-dark);
	color: var(--text-white);
	padding: 1em;
	margin: 0 5%;
	border-radius: var(--lg-radius);
	box-shadow: var(--br-shadow);
}

	#temp_comment_box p {
		margin: 0;
		padding: 0;
		text-indent: 0;
		text-align: center;
	}


/* The following is the custom styling the site applies to the HCB comment sections. */

/* Container for the comment box */
#HCB_comment_box {
	background-color: var(--bg-dark);
	color: var(--text-white);
	font-family: var(--font-standard) !important;
	padding: 1em;
	margin: 0 5%;
	border-radius: var(--lg-radius);
	box-shadow: var(--br-shadow);
}

/* Base input styling */
#HCB_comment_box input[type="text"],
#HCB_comment_box input[type="email"],
#HCB_comment_box input[type="submit"],
#HCB_comment_box textarea,
#HCB_comment_box #hcb_form_name {
	background-color: var(--bg-bright);
	color: var(--text-white);
	border: var(--border-width) solid var(--bg-brighter);
	border-radius: var(--sm-radius);
	padding: 0.5em;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-standard) !important;
	font-size: 1em;
	margin-bottom: 0.75em;
}

/* Button hover & active */
#HCB_comment_box input[type="submit"] {
	background-color: var(--accent-green);
	color: var(--text-white);
	font-weight: bold;
	cursor: pointer;
	transition: var(--hover-transition);
}
#HCB_comment_box input[type="submit"]:hover { background-color: var(--accent-green-hover); }
#HCB_comment_box input[type="submit"]:active { background-color: var(--accent-green-active); }

/* Email me replies checkbox */
#HCB_comment_box #hcb_subscribe span { color: var(--text-white); }

/* Textarea should match the rest; just big enough to fit 3 lines by default */
#HCB_comment_box textarea#hcb_form_content {
	min-height: 4.5em;
	height: 4.5em;
	resize: vertical;
}

#HCB_comment_box #hcb_form #hcb_subscribe { margin: 0 !important; }

/* This is to reduce visual clutter and improve the UX, not just because I don't want to pay. */
.home-desc,
#hcb_msg,
#hcb_settings { display: none !important; }

/* Admin/account crap no-one can see but me */
.admin-link img {
	filter: invert(100%);
}

/* === CSS to enable when Javascript is disabled === */

/* Show scrollbar only when JS is disabled */
.no-js .nav ul {
	scrollbar-width: auto !important;
	-ms-overflow-style: auto !important;
	overflow-x: auto !important;
}

/* Hide audio player if no JS */
.no-js #soundtrack { display: none; }

/* Prevent resizer from being interacted with if no JS */
.no-js #resizer { pointer-events: none; }

/* Hide fancy header back button if no JS */
.no-js #nav-back { display: none; }