@charset "utf-8";
/**
* Website branding and customizations.
*/
:root {
	--color-l-mod1: 7;
	--color-l-mod2: 14;
	--color-l-mod3: 21;
	--color-l-mod4: 28;
	--color-l-mod5: 35;

	/* Brown */
	--color-bgnd: hsl(31 45% 45%);
	--color-bgnd-tint1: hsl(from var(--color-bgnd) h s calc(l + var(--color-l-mod1)));
	--color-bgnd-tint2: hsl(from var(--color-bgnd) h s calc(l + var(--color-l-mod2)));
	--color-bgnd-tint3: hsl(from var(--color-bgnd) h s calc(l + var(--color-l-mod3)));
	--color-bgnd-tint4: hsl(from var(--color-bgnd) h s calc(l + var(--color-l-mod4)));
	--color-bgnd-tint5: hsl(from var(--color-bgnd) h s calc(l + var(--color-l-mod5)));
	--color-bgnd-shade1: hsl(from var(--color-bgnd) h s calc(l - var(--color-l-mod1)));
	--color-bgnd-shade2: hsl(from var(--color-bgnd) h s calc(l - var(--color-l-mod2)));
	--color-bgnd-shade3: hsl(from var(--color-bgnd) h s calc(l - var(--color-l-mod3)));
	--color-bgnd-shade4: hsl(from var(--color-bgnd) h s calc(l - var(--color-l-mod4)));
	--color-bgnd-shade5: hsl(from var(--color-bgnd) h s calc(l - var(--color-l-mod5)));

	/* Gray */
	--color-gray: hsl(none 0% 60%);
	--color-gray-tint1: hsl(from var(--color-gray) h s calc(l + var(--color-l-mod1)));
	--color-gray-tint2: hsl(from var(--color-gray) h s calc(l + var(--color-l-mod2)));
	--color-gray-tint3: hsl(from var(--color-gray) h s calc(l + var(--color-l-mod3)));
	--color-gray-tint4: hsl(from var(--color-gray) h s calc(l + var(--color-l-mod4)));
	--color-gray-tint5: hsl(from var(--color-gray) h s calc(l + var(--color-l-mod5)));
	--color-gray-shade1: hsl(from var(--color-gray) h s calc(l - var(--color-l-mod1)));
	--color-gray-shade2: hsl(from var(--color-gray) h s calc(l - var(--color-l-mod2)));
	--color-gray-shade3: hsl(from var(--color-gray) h s calc(l - var(--color-l-mod3)));
	--color-gray-shade4: hsl(from var(--color-gray) h s calc(l - var(--color-l-mod4)));
	--color-gray-shade5: hsl(from var(--color-gray) h s calc(l - var(--color-l-mod5)));

	/* Red */
	--color-accent1: hsl(0 60% 60%);
	--color-accent1-tint1: hsl(from var(--color-accent1) h s calc(l + var(--color-l-mod1)));
	--color-accent1-tint2: hsl(from var(--color-accent1) h s calc(l + var(--color-l-mod2)));
	--color-accent1-tint3: hsl(from var(--color-accent1) h s calc(l + var(--color-l-mod3)));
	--color-accent1-tint4: hsl(from var(--color-accent1) h s calc(l + var(--color-l-mod4)));
	--color-accent1-tint5: hsl(from var(--color-accent1) h s calc(l + var(--color-l-mod5)));
	--color-accent1-shade1: hsl(from var(--color-accent1) h s calc(l - var(--color-l-mod1)));
	--color-accent1-shade2: hsl(from var(--color-accent1) h s calc(l - var(--color-l-mod2)));
	--color-accent1-shade3: hsl(from var(--color-accent1) h s calc(l - var(--color-l-mod3)));
	--color-accent1-shade4: hsl(from var(--color-accent1) h s calc(l - var(--color-l-mod4)));
	--color-accent1-shade5: hsl(from var(--color-accent1) h s calc(l - var(--color-l-mod5)));

	/* Green */
	--color-accent2: hsl(120 30% 60%);
	--color-accent2-tint1: hsl(from var(--color-accent2) h s calc(l + var(--color-l-mod1)));
	--color-accent2-tint2: hsl(from var(--color-accent2) h s calc(l + var(--color-l-mod2)));
	--color-accent2-tint3: hsl(from var(--color-accent2) h s calc(l + var(--color-l-mod3)));
	--color-accent2-tint4: hsl(from var(--color-accent2) h s calc(l + var(--color-l-mod4)));
	--color-accent2-tint5: hsl(from var(--color-accent2) h s calc(l + var(--color-l-mod5)));
	--color-accent2-shade1: hsl(from var(--color-accent2) h s calc(l - var(--color-l-mod1)));
	--color-accent2-shade2: hsl(from var(--color-accent2) h s calc(l - var(--color-l-mod2)));
	--color-accent2-shade3: hsl(from var(--color-accent2) h s calc(l - var(--color-l-mod3)));
	--color-accent2-shade4: hsl(from var(--color-accent2) h s calc(l - var(--color-l-mod4)));
	--color-accent2-shade5: hsl(from var(--color-accent2) h s calc(l - var(--color-l-mod5)));

	/* Blue */
	--color-accent3: hsl(210 60% 60%);
	--color-accent3-tint1: hsl(from var(--color-accent3) h s calc(l + var(--color-l-mod1)));
	--color-accent3-tint2: hsl(from var(--color-accent3) h s calc(l + var(--color-l-mod2)));
	--color-accent3-tint3: hsl(from var(--color-accent3) h s calc(l + var(--color-l-mod3)));
	--color-accent3-tint4: hsl(from var(--color-accent3) h s calc(l + var(--color-l-mod4)));
	--color-accent3-tint5: hsl(from var(--color-accent3) h s calc(l + var(--color-l-mod5)));
	--color-accent3-shade1: hsl(from var(--color-accent3) h s calc(l - var(--color-l-mod1)));
	--color-accent3-shade2: hsl(from var(--color-accent3) h s calc(l - var(--color-l-mod2)));
	--color-accent3-shade3: hsl(from var(--color-accent3) h s calc(l - var(--color-l-mod3)));
	--color-accent3-shade4: hsl(from var(--color-accent3) h s calc(l - var(--color-l-mod4)));
	--color-accent3-shade5: hsl(from var(--color-accent3) h s calc(l - var(--color-l-mod5)));

	/* Yellow */
	--color-accent4: hsl(60 100% 50%);
	--color-accent4-tint1: hsl(from var(--color-accent4) h s calc(l + var(--color-l-mod1)));
	--color-accent4-tint2: hsl(from var(--color-accent4) h s calc(l + var(--color-l-mod2)));
	--color-accent4-tint3: hsl(from var(--color-accent4) h s calc(l + var(--color-l-mod3)));
	--color-accent4-tint4: hsl(from var(--color-accent4) h s calc(l + var(--color-l-mod4)));
	--color-accent4-tint5: hsl(from var(--color-accent4) h s calc(l + var(--color-l-mod5)));
	--color-accent4-shade1: hsl(from var(--color-accent4) h s calc(l - var(--color-l-mod1)));
	--color-accent4-shade2: hsl(from var(--color-accent4) h s calc(l - var(--color-l-mod2)));
	--color-accent4-shade3: hsl(from var(--color-accent4) h s calc(l - var(--color-l-mod3)));
	--color-accent4-shade4: hsl(from var(--color-accent4) h s calc(l - var(--color-l-mod4)));
	--color-accent4-shade5: hsl(from var(--color-accent4) h s calc(l - var(--color-l-mod5)));

	/* Orange */
	--color-accent5: hsl(30 100% 60%);
	--color-accent5-tint1: hsl(from var(--color-accent5) h s calc(l + var(--color-l-mod1)));
	--color-accent5-tint2: hsl(from var(--color-accent5) h s calc(l + var(--color-l-mod2)));
	--color-accent5-tint3: hsl(from var(--color-accent5) h s calc(l + var(--color-l-mod3)));
	--color-accent5-tint4: hsl(from var(--color-accent5) h s calc(l + var(--color-l-mod4)));
	--color-accent5-tint5: hsl(from var(--color-accent5) h s calc(l + var(--color-l-mod5)));
	--color-accent5-shade1: hsl(from var(--color-accent5) h s calc(l - var(--color-l-mod1)));
	--color-accent5-shade2: hsl(from var(--color-accent5) h s calc(l - var(--color-l-mod2)));
	--color-accent5-shade3: hsl(from var(--color-accent5) h s calc(l - var(--color-l-mod3)));
	--color-accent5-shade4: hsl(from var(--color-accent5) h s calc(l - var(--color-l-mod4)));
	--color-accent5-shade5: hsl(from var(--color-accent5) h s calc(l - var(--color-l-mod5)));

	/* Hyperlinks */
	--color-link: hsl(207 93% 50%);
	--color-link-hover: hsl(from var(--color-link) h s calc(l + 5));
	--color-link-visited: hsl(from var(--color-link) 271 s l);
	--color-link-active: hsl(from var(--color-link) 0 s l);
}

body {
	background-color: var(--color-bgnd-tint5);
	display: flex;
	flex-direction: column;
}
button {
	--color-background: var(--color-bgnd-shade2);
	--color-border: var(--color-bgnd-shade4);
	--color-text: White;
	--width-button: 8em;

	border-radius: var(--radius-border);

	&[disabled] {
		--color-background: var(--color-gray-tint2);
		--color-border: var(--color-gray-shade4);
		--color-text: var(--color-gray-shade4);
	}

	&.discrete {
		--color-background: White;
		--color-text: var(--color-border);

		border-style: solid;
	}
}
details {
	border-radius: var(--radius-border);
	max-inline-size: max-content;
	overflow: hidden;

	& > summary {
		box-shadow: var(--box-shadow);

		&:active {
			box-shadow: none;
		}
	}

	&[open] > :not(summary) {
		border-color: var(--color-bgnd-shade4);
		box-shadow: inset var(--box-shadow);
		margin-block: 0;

		& .title {
			background-color: var(--color-accent3-tint5);
			border: var(--width-border) solid currentColor;
			color: var(--color-accent3-shade4);
		}
	}
	& .column-header {
		border-bottom: var(--width-border) solid currentColor;
		color: var(--color-accent3-shade4);
		font-family: var(--font-family-heading-condensed);
		font-weight: bold;
		margin-block-end: var(--em-xs);
	}
}
fieldset {
	border-color: var(--color-bgnd-shade4);
}
footer,
header {
	background-color: var(--color-bgnd-shade4);
	color: White;
	padding-block: var(--rem-xs);

	& :first-child {
		margin-block-start: 0;
	}
	& :last-child {
		margin-block-end: 0;
	}
}
footer {
	bottom: 0;
	position: sticky;
	z-index: 99;

	a {
		&:link {
			color: White;
		}
		&:visited {
			color: var(--color-bgnd-tint5);
		}
		&:hover {
			color: var(--color-bgnd-tint3);
		}
		&:active {
			color: var(--color-accent4);
		}
	}
	& container-grid {
		grid-template-columns: repeat(auto-fit, 24ch);
	}
	& h2 {
		color: White;
		font-family: var(--font-family-heading-condensed);
		font-size: var(--rem-md);
		margin-block: var(--rem-sm);
	}
	& ul {
		list-style: none;

		& li::before {
			aspect-ratio: 1 / 1;
			background-color: Red;
			/* border-radius: calc(var(--rem-sm) * 0.25); */
			background-repeat: no-repeat;
			background-size: cover;
			/* border: calc(var(--width-border) * 2) solid Black; */
			content: '';
			display: inline-block;
			inline-size: calc(var(--em-md) * 0.75);
			margin-inline-end: var(--em-sm);
		}
		& li::before {
			background-image: url('../images/die-1.svg');
		}
		& > ul li::before {
			background-image: url('../images/die-2.svg');
		}
		& > ul > ul li::before {
			background-image: url('../images/die-3.svg');
		}
		& > ul > ul > ul li::before {
			background-image: url('../images/die-4.svg');
		}
		& > ul > ul > ul > ul li::before {
			background-image: url('../images/die-5.svg');
		}
		& > ul > ul > ul > ul > ul li::before {
			background-image: url('../images/die-6.svg');
		}
	}

	.copyright {
		font-size: calc(var(--rem-md) * 0.8);
		margin-block-start: var(--rem-md);
	}
}
form {
	background-color: White;
	border-color: var(--color-bgnd-shade4);
	border-radius: var(--radius-border);
	box-shadow: inset var(--box-shadow);
}
h1,
h2,
h3 {
	--_color-shadow: Black;
	--_size-shadow: 0.05em;
	--_size-shadow-negative: calc(0.05em * -1);

	text-shadow:
		var(--_size-shadow-negative) var(--_size-shadow-negative) 0 var(--_color-shadow),
		0 var(--_size-shadow-negative) 0 var(--_color-shadow),
		var(--_size-shadow) var(--_size-shadow-negative) 0 var(--_color-shadow),
		var(--_size-shadow) 0 var(--_color-shadow),
		var(--_size-shadow) var(--_size-shadow) 0 var(--_color-shadow),
		0 var(--_size-shadow) 0 var(--_color-shadow),
		var(--_size-shadow-negative) var(--_size-shadow) 0 var(--_color-shadow),
		var(--_size-shadow-negative) 0 var(--_color-shadow);
}
h1 {
	color: var(--color-accent1);
}
h2 {
	color: var(--color-accent4);
	font-size: calc(var(--size-h1) * 0.8);
}
h3 {
	color: var(--color-gray-tint3);
	font-size: calc(var(--size-h1) * 0.7);
}
header {
	align-items: center;
	display: flex;
	flex-direction: column;

	& h1 {
		color: White;
		font-size: 0.925rem;
		margin-block: var(--rem-sm);
	}
}
img.icon {
	block-size: var(--rem-md);
	inline-size: var(--rem-md);
}
input:is([type="number"], [type="text"]), select, textarea {
	background-color: #f0f8ff;
	border: none;
	box-shadow: inset var(--box-shadow);
	color: Black;
	padding-inline: var(--rem-xs);
}
input:is([type="checkbox"], input[type="radio"]) {
	margin: 0;
}
legend {
	color: var(--color-bgnd-shade2);
}
table {
	& thead {
		--color-background: var(--color-accent3-tint4);
		--color-text: var(--color-accent3-shade5);
	}
}

.container-message-box {
	--_color-background: var(--color-background, none);
	--_color-border: var(--color-border, default);

	background-color: var(--_color-background);
	border-color: var(--_color-border);
	border-radius: var(--radius-border);
	border-style: solid;
	border-width: var(--em-3xs) var(--em-3xs) var(--em-3xs) var(--em-xs);
	inline-size: fit-content;
	margin-block: var(--rem-sm);
	overflow-wrap: anywhere;
	padding-block: var(--rem-xs);
	padding-inline: var(--rem-sm);
	text-wrap: pretty;

	&:is(
		[type="bad"],
		[type="error"],
		[type="disabled"],
		[type="good"],
		[type="success"],
		[type="info"],
		[type="warning"]
	) {
		color: var(--color-dark-mode-bgnd);
	}
	&:is(
		[type="bad"],
		[type="error"]
	) {
		--color-background: var(--color-accent1-tint4);
		--color-border: var(--color-accent1-shade2);
	}
	&[type="disabled"] {
		--color-background: var(--color-gray-tint4);
		--color-border: var(--color-gray-shade2);
	}
	&:is(
		[type="good"],
		[type="success"]
	) {
		--color-background: var(--color-accent2-tint4);
		--color-border: var(--color-accent2-shade2);
	}
	&[type="info"] {
		--color-background: var(--color-accent3-tint4);
		--color-border: var(--color-accent3-shade2);
	}
	&[type="warning"] {
		--color-background: var(--color-accent5-tint4);
		--color-border: var(--color-accent5-shade2);
	}
	&:last-child {
		margin-block-end: 0;
	}
}
.title {
	color: var(--color-bgnd-shade3);
}

/* Animations. */
@keyframes flex-fade-in {
	from {
		display: none;
		opacity: 0;
	}
	to {
		display: flex;
		opacity: 1;
	}
}
@keyframes flex-fade-out {
	from {
		display: flex;
		opacity: 1;
	}
	to {
		display: none;
		opacity: 0;
	}
}
/* End animations. */

@media (prefers-color-scheme: dark) {
	body {
		background-color: inherit;
	}
	details {
		& .column-header {
			border-color: currentColor;
			color: var(--color-accent3-tint3);
		}
	}
	form {
		background-color: var(--color-dark-mode-bgnd);
		color: var(--color-dark-mode-text);
	}
	legend {
		color: var(--color-bgnd-tint5);
	}

	.title {
		color: var(--color-bgnd-tint3);
	}
}