@property --sb {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
@property --bw {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
@font-face {
	font-family: 'Gloria Hallelujah';
	src: url('gh.woff2') format('woff2'), url('gh.woff') format('woff'), url('gh.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
.whimsy {
  font-family: "Gloria Hallelujah", cursive;
  font-weight: 400;
  font-style: normal;
}
.formal {
  font-family: Georgia, serif;
  font-weight: 400;
  font-style: normal;
}
* { box-sizing: border-box; }
html {
	background: none;
	container-type: inline-size;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
body {
	--sb: calc(100vw - 100cqw); /* --scrollbar */
	--bw: 1cqw; /* --bodywidth */
	margin: 0;
	padding: 0;
	background-repeat: repeat;
	background-size: 152px;
	min-height: 100dvh;
}
/* site-header */
.site-header {
	align-content: center;
	background-repeat: repeat;
	background-size: calc(4svh + 3rem);
	display: grid;
	grid-auto-flow: column;
	height: calc(4svh + 3rem);
	margin: 0;
	padding: 0;
	position: sticky;
		left: 0;
		top: 0;
	z-index: 999;
}
.logo {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 1svw;
	margin: 0;
	padding: 0;
	text-decoration: none;
	img {
		height: calc(4svh + 3rem);
		margin: 0;
		padding: 1svh 0.675svh;
		width: calc(2.7svh + 2.025rem);
	}
	span {
		color: black;
		font-family: "Gloria Hallelujah", cursive;
		font-size: clamp(1.1rem, 3.6svw, 2.25rem);
		margin: 0;
		padding: 0;
	}
}
.menu-button {
	align-content: center;
	font-family: "Gloria Hallelujah", cursive;
	font-size: clamp(1rem, 5svw, 2.5rem);
	padding-inline: 10svw;
	width: clamp(1rem, 5svw, 2.5rem);
}
.menu-button::before { content: "☰"; }
.menu-toggle:checked ~ .menu-button::before { content: "X"; }
.menu-links {
	align-items: center;
	display: flex;
	justify-self: end;
	margin: 0;
	padding: 0;
	transition: opacity 0.3s;
	a {
		background-color: transparent;
		color: black;
		font-family: "Gloria Hallelujah", cursive;
		margin: 0;
		padding: 0;
		text-decoration: underline;
	}
}
.menu-toggle { display: none; }
@media (orientation: landscape) and (min-width: 53rem) {
	.logo {
		justify-self: start;
		padding-left: calc(3dvw - 0.675svh);
		span { font-size: clamp(1rem, 2.14svw, 2.25rem); }
	}
	.menu-button { display: none; }
	.menu-links {
		background: none;
		flex-direction: row;
		gap: 3dvw;
		opacity: 1;
		padding-right: 3dvw;
		pointer-events: auto;
		a { font-size: clamp(1rem, 1.9svw, 2rem); }
	}
}
@media (orientation: portrait), (max-width: 53rem) {
	.site-header { justify-content: center; }
	.logo span { font-size: clamp(1.25rem, 6svw, 2.25rem); }
	.menu-button { display: inline; }
	.menu-links {
		background-repeat: repeat;
		background-size: 152px;
		flex-direction: column;
		gap: 3dvh;
		height: calc(96dvh - 3rem);
		opacity: 0;
		overflow-y: auto;
		padding-block: 1dvh 3dvh;
		pointer-events: none;
		position: absolute;
			left: 0;
			top: calc(4svh + 3rem);
		text-align: center;
		width: 100dvw;
		a { font-size: clamp(1.25rem, 6svw, 2.25rem); }
	}
	.menu-toggle:checked ~ .menu-links {
		opacity: 1;
		pointer-events: auto;
	}
}
.std-body {
	height: calc(96svh - 3rem);
}
h1 {
	margin: 0;
	padding: 0;
	text-align: center;
}
/* div-header */
.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(4svh + 2.6875rem);
	justify-content: center;
	margin: 0;
	padding: 0;
	position: sticky;
		top: calc(4svh + 2.6875rem);
	text-align: center;
	z-index: 997;
}
.div-header a, .div-header h1 {
	font-size: clamp(1rem, 5svw, 2rem);
	margin: 0;
	padding: 0;
	text-decoration: none;
}
/* JavaScript detection */
@media (scripting: none), (scripting: initial-load) {
	.theme-label { color: yellow; }
	.theme-label::after { content: " ⚠"; }
}
.nojs {
	background: var(--bg);
	margin: 0.5lvh 0;
	padding: 0;
	position: sticky;
		bottom: calc(0.25lvh);
	z-index: 998;
}
.nojs h3 {
	border: 2px solid yellow;
	border-radius: 8px;
	font-size: max(1rem, 1lvw);
	margin: 0;
	padding: 0.5lvh;
	text-align: center;
}
/* font-size*/
.hfs { font-size: clamp(1rem, 6svw, 3rem); }
.hts {
	--pts: clamp(0.1rem, 0.6svw, 0.3rem);
	--nts: clamp(-0.3rem, -0.6svw, -0.1rem);
	text-shadow: var(--pts) var(--pts) 0 var(--bg), var(--nts) var(--pts) 0 var(--bg), var(--pts) var(--nts) 0 var(--bg), var(--nts) var(--nts) 0 var(--bg), 0px var(--pts) 0 var(--bg), var(--pts) 0px 0 var(--bg), 0px var(--nts) 0 var(--bg), var(--nts) 0px 0 var(--bg);
}
.sfs { font-size: clamp(1rem, 3svw, 1.5rem); }
.sts {
	--pts: clamp(0.1rem, 0.3svw, 0.15rem);
	--nts: clamp(-0.15rem, -0.3svw, -0.1rem);
	text-shadow: var(--pts) var(--pts) 0 var(--bg), var(--nts) var(--pts) 0 var(--bg), var(--pts) var(--nts) 0 var(--bg), var(--nts) var(--nts) 0 var(--bg), 0px var(--pts) 0 var(--bg), var(--pts) 0px 0 var(--bg), 0px var(--nts) 0 var(--bg), var(--nts) 0px 0 var(--bg);
}
/* buttons */
.btn {
	background-color: var(--tc);
	border: 2px solid var(--fg);
	border-radius: 1rem;
	color: var(--fg);
	display: block;
	font-weight: 700;
	padding: 2svh 0.5svw;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s;
	width: 100%;
}
.btn:active { background-color: var(--dc); }

.std-pad {
	--Wmin: calc(768px + var(--sb));
	--Wmax: calc(1902px + var(--sb));
	--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))));
	--clamped: clamp(var(--Pmin), var(--scale), var(--Pmax));
	padding-left: var(--clamped);
	padding-right: var(--clamped);
	scroll-margin-top: calc(9.5svh + 5.375rem);
}