* {
	font-family: Tahoma, Verdana, sans-serif;
	box-sizing: border-box;
}
@property --bg {
	syntax: "<color>";
	inherits: true;
	initial-value: black;
}
@property --fg {
	syntax: "<color>";
	inherits: true;
	initial-value: white;
}
@property --mg {
	syntax: "<color>";
	inherits: true;
	initial-value: #404040;
}
@property --rlorange {
	syntax: "<color>";
	inherits: true;
	initial-value: #FF7016;
}
@property --darkorange {
	syntax: "<color>";
	inherits: true;
	initial-value: #E95F00;
}
.theme-radio[id="oled"]:checked ~ .theme-root {
	--bg: black;
	--fg: white;
	--mg: #404040;
	--rlorange: #FF7016;
	--darkorange: #E95F00;
	background: black;
	background-color: black;
	color: white;
}
.theme-radio[id="dark"]:checked ~ .theme-root {
	--bg: #212529;
	--fg: white;
	--mg: #606060;
	--rlorange: #FF7517;
	--darkorange: #E95F00;
	background: #212529;
	background-color: #212529;
	color: white;
}
.theme-radio[id="light"]:checked ~ .theme-root {
	--bg: #E9E9E9;
	--fg: black;
	--mg: #B4B4B4;
	--rlorange: #FF8018;
	--darkorange: #F46A0B;
	background: #E9E9E9;
	background-color: #E9E9E9;
	color: black;
}
.theme-radio[id="ultra"]:checked ~ .theme-root {
	--bg: white;
	--fg: black;
	--mg: #E0E0E0;
	--rlorange: #FF8519;
	--darkorange: #F76D0E;
	background: white;
	background-color: white;
	color: black;
}
@media (scripting: none), (scripting: initial-load) {
	.theme-label { color: yellow; }
	.theme-label::after { content: " ⚠"; }
}
.theme-root {
	min-height: 100vh;
	padding: 0 4px 2vh 4px;
}
.theme-root a {
	background-color: var(--bg);
	color: var(--fg);
}
.theme-button {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.5);
	transition: max-height 0.225s ease, max-width 0.225s ease, opacity 0.225s ease, transform 0.225s ease;
}
.theme-toggle:checked ~ .theme-button {
	opacity: 1;
	pointer-events: auto !important;
	transform: scale(1);
}
.theme-radio,
.theme-toggle,
.filter-toggle,
.filter-radio,
.menu-toggle {
	display: none;
}
.theme-button:nth-of-type(2) { transition-delay: 0ms; }
.theme-button:nth-of-type(3) { transition-delay: 75ms; }
.theme-button:nth-of-type(4) { transition-delay: 150ms; }
.theme-button:nth-of-type(5) { transition-delay: 225ms; }
.filters {
	border: 2px solid var(--fg);
	border-radius: 32px;
	display: none;
	gap: 2vw;
	justify-content: center;
	margin: 2vh 0;
	padding: 2vh;
	scroll-margin-top: calc(8vh + 5.375rem);
	transition: transform 0.2s ease;
}
.filter-toggle:checked ~ .div-header .filter-button:before { content: "Hide "; }
.filter-button {
	font-size: clamp(1rem, 4.6vw, 2rem);
	pointer-events: auto;
	position: relative;
	left: 2vw;
}
.filters a {
	font-size: clamp(1rem, 4.6vw, 2rem);
	pointer-events: auto;
}
.filters h5 {
	font-size: clamp(1rem, 4.6vw, 2rem);
	margin: 0;
	padding: 0;
}
@property --scrollbar {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px; 
}
@property --bw {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;	
}
html {
	background: none;
	container-type: inline-size;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
body {
	--scrollbar: calc(100vw - 100cqw);
	--bw: 1cqw;
	background: none;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.5; text-align: center; }
img { border-radius: 16px; }
li { line-height: 1.5; margin: 0.5rem 0; text-align: justify; }
p { line-height: 1.5; text-align: justify; }
.std-pad {
	--Wmin: calc(768px + var(--scrollbar));
	--Wmax: calc(1902px + var(--scrollbar));
	--Pmin: calc(2 * var(--bw));
	--Pmax: calc(10 * var(--bw));
	--scale: calc(var(--Pmin) + (var(--Pmax) - var(--Pmin)) * ((100% - var(--Wmin)) / (var(--Wmax) - var(--Wmin))));
	padding-left: clamp(var(--Pmin), var(--scale), var(--Pmax));
	padding-right: clamp(var(--Pmin), var(--scale), var(--Pmax));
	scroll-margin-top: calc(9.5vh + 5.375rem);
}
.site-header {
	background-color: var(--bg);
	height: calc(4vh + 2.6875rem);
	justify-content: center;
	margin: 0;
	padding: 0;
    position: sticky;
	left: 0;
    top: 0;
    z-index: 9999;
}
.swap-text {
	margin: 0;
	padding: 0;
	position: relative;
	left: 0;
	top: 2vh;
}
.menu-links {
	background: var(--bg);
	display: flex;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	left: 0;
	text-decoration: underline;
	transition: left 450ms ease, opacity 0.2s ease-out;
	width: calc(100vw - (4 * clamp(10px, 2.5vw, 24px)));
}
.div-header {
	align-items: center;
	background-color: var(--bg);
	border-top: 1px solid var(--fg);
	border-bottom: 1px solid var(--fg);
	display: flex;
	height: calc(4vh + 2.6875rem);
	justify-content: center;
	margin: 0;
	padding: 0;
	position: sticky;
	text-align: center;
	top: calc(4vh + 2.6875rem);
	z-index: 9997;
}
.div-header a,
.div-header h1 {
	margin: 0;
	padding: 0;
}
.nojs {
	background: var(--bg);
	margin: 0.5vh 0;
	padding: 0;
	position: sticky;
	bottom: calc(0.25vh);
	z-index: 9998;
}
.nojs h3 {
	border: 2px solid yellow;
	border-radius: 8px;
	font-size: max(1rem, 1vw);
	margin: 0;
	padding: 0.5vh;
	text-align: center;
}
.btn {
	border: 2px solid var(--fg);
	border-radius: 1rem;
	display: block;
	font-size: clamp(1rem, 1.6vw, 1.5rem);
	padding: 1vh 1vw;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
	width: 100%;
}
.btn:active { background-color: var(--darkorange); }
@media (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
	.swap-text span {
		font-size: clamp(12px, 4.6vw, 32px);
	}
	.menu-button {
		display: inline;
		font-size: clamp(11px, 4.6vw, 32px);
		opacity: 1;
		padding: 6px;
	}
	.menu-button::before {
		content: "☰";
	}
	.menu-toggle:checked ~ .menu-button::before {
		content: "X";
	}
	.menu-links {
		flex-direction: column;
		font-size: clamp(16px, 6vw, 32px);
		gap: 4vh;
		height: calc(96lvh - 2.6875rem);
		padding-top: 4vh;
		top: calc(4vh + 2.6875rem);
		width: 100%;
	}
	.menu-toggle:checked ~ .menu-links {
		opacity: 1;
		pointer-events: auto;
	}
	.div-header a {
		font-size: clamp(1rem, 4.6vw, 2rem);
		text-decoration: underline;
	}
	.div-header h1 {
		font-size: clamp(1rem, 4.6vw, 2rem);
	}
	.theme-button {
		max-height: 0;
		transform-origin: top;
	}
	.theme-toggle:checked ~ .theme-button {
		max-height: 100%;
	}
}
@media (hover: hover) and (pointer: fine) {
	.swap-text span {
		font-size: clamp(1rem, 8vw, 2rem);
		text-decoration: none;
		transition: opacity 0.2s ease-in;
	}
	.swap-text:hover span	{
		opacity: 0;
	}
	.div-header h1,
	.div-header a {
		font-size: clamp(1rem, 4.6vw, 2rem);
		text-decoration: none;
		transition: opacity 0.2s ease-in;
	}
	body:has(:target) .div-header:hover a {
		text-decoration: underline;
	}
	.btn:hover {
		background-color: var(--rlorange);
	}
	@media (orientation: landscape) {
		.menu-button {
			display: none;
		}
		.menu-links {
			font-size: clamp(11px, 3.2vw, 32px);
			gap: clamp(10px, 2.5vw, 24px);
			justify-content: center;
			left: calc(2 * clamp(10px, 2.5vw, 24px));
			pointer-events: auto;
			top: calc((clamp(12px, 8vw, 32px) - clamp(11px, 3.2vw, 32px)) / 2);
		}
		.theme-toggle:checked ~ .menu-links {
			left: 0;
		}
		.swap-text:hover .menu-links {
			opacity: 1;
		}
		.theme-button {
			max-width: 0;
			transform-origin: left;
		}
		.theme-toggle:checked ~ .theme-button {
			max-width: 100%;
		}
	}
	@media (orientation: portrait) {
		.swap-text .menu-toggle:checked ~ span {
			opacity: 0;
		}
		.menu-button::before {
			content: "Site Menu";
		}
		.menu-toggle:checked ~ .menu-button::before {
			content: "Close Menu";
		}
		.menu-button {
			border: none;
			display: block;
			font-size: clamp(1rem, 8vw, 2rem);
			opacity: 0;
			padding: 0;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;
			text-decoration: underline;
			transition: opacity 0.2s ease-out;
			width: 100%;
		}
		.menu-links {
			flex-direction: column;
			font-size: clamp(11px, 6vw, 2rem);
			gap: 30px;
			height: calc(96vh - 43px);
			padding-top: 30px;
			top: calc(4vh + 43px);
			width: 100%;
		}
		.swap-text:hover .menu-button,
		.menu-toggle:checked ~ .menu-button {
			opacity: 1;						
		}
		.menu-toggle:checked ~ .menu-links {
			opacity: 1;
			pointer-events: auto;
		}
		.theme-button {
			max-height: 0;
			transform-origin: top;
		}
		.theme-toggle:checked ~ .theme-button {
			max-height: 100%;
		}
	}
}