@property --reveal-content
{
	syntax: '<number>';
	initial-value: 0.0;
	inherits: true;
}

@property --background-angle
{
	syntax: '<number>';
	initial-value: 0.0;
	inherits: true;
}

@property --theme-lightness
{
	syntax: '<number>';
	initial-value: 1.0;
	inherits: true;
}


:root
{
	--theme-red: #b21f27;

	--ease-elastic: cubic-bezier(1.0, -0.1, 0.0, 0.1);
	--animation-ease: ease;
	--animation-duration-short: 0.15s;
	--animation-duration-long: 0.5s;

	--theme-lightness-percent: calc(100% * var(--theme-lightness));
	--theme-darkness-percent: calc(100% * (1.0 - var(--theme-lightness)));

	--shadow-opacity: calc(20% + 20% * var(--theme-lightness));
	--shadow-opacity-bold: calc(20% + 70% * var(--theme-lightness));

	--shadow-color: hsl(0deg 0% 0% / var(--shadow-opacity));
	--shadow-color-bold: hsl(0deg 0% 0% / var(--shadow-opacity-bold));

	--theme-back: hsl(0 0 var(--theme-lightness-percent));
	--theme-fore: hsl(0 0 var(--theme-darkness-percent));

	transition-property: --theme-lightness;
	transition-timing-function: var(--animation-ease);
	transition-duration: 0.3s;
}


@media (scripting: none)
{
	*
	{
		--reveal-content: 1.0 !important;
	}
}






main
{
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	flex-basis: 0.0;
	flex-shrink: 1.0;
	flex-grow: 1.0;
}





.logo-area img
{
	filter: invert(calc(100% - var(--theme-lightness) * 100%)) hue-rotate(calc(180deg - var(--theme-lightness) * 180deg));
}


@font-face
{
	font-family: Gobold;
	font-display: swap;
	src:
		local("gobold_boldregular"),
		local("Gobold"),
		url("./resources/fonts/gobold-webfont.woff2"),
		'Lucida Sans'
}


html
{
	background-color: #333;
	overflow: hidden;
	inset: 0;
	padding: 0;
	margin: 0;
}

body
{
	position: absolute;
	inset: 0;
	padding: 0;
	margin: 0;

	display: flex;
	overflow: hidden scroll;
	flex-direction: column;

	box-sizing: border-box;
	border-radius: 3px;

	font-family: 'Gobold';
	color: var(--theme-fore);

	background-color: none;
}


*:focus
{
	outline: dashed 2px var(--theme-fore) !important;
	outline-offset: 2px !important;
}



.hero-background
{
	z-index: -100;
	pointer-events: none;
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0%) contrast(90%) blur(1px);

	transition-property: translate, scale;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}







.page-content
{
	position: relative;
	flex-shrink: 0.0;
	flex-grow: 1.0;
	max-width: 60rem;
	left: 50%;
	translate: -50% 0;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	overflow: hidden;
	background: none;
}






@keyframes background-position-slide-right
{
	0%
	{
		color: var(--theme-back);
		text-shadow: -2px 0px 0px #0000;
	}

	25%
	{
		color: var(--theme-back);
		text-shadow: 0px 0px 9px #0ff;
	}

	50%
	{
		color: var(--theme-back);
		text-shadow: 2px 0px 0px #0000;
	}

	75%
	{
		color: var(--theme-back);
		text-shadow: 0px 0px 9px #ff0;
	}

	100%
	{
		color: var(--theme-back);
		text-shadow: -2px 0px 0px #0000;
	}
}

.wip-warning
{
	display: block;
	pointer-events: none;
	z-index: 999;
	overflow: hidden;

	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.5rem;

	font-size: 0.8rem;
	font-weight: bold;
	font-family: sans-serif;
	line-height: 0;
	align-content: center;
	letter-spacing: 2px;
	text-wrap: nowrap;
	text-align: center;
	color: var(--theme-fore);

	backdrop-filter: blur(4px);


	--back-col-0: hsl(42 90% 50% / 0.5);
	--back-col-1: hsl(0 0% 50% / 0.5);

	background: repeating-linear-gradient(45deg, var(--back-col-0) 0rem, var(--back-col-0) 1.9rem, var(--back-col-1) 2rem, var(--back-col-1) 3.9rem, var(--back-col-0) 4rem);
	box-shadow: 0px 4px 4px var(--shadow-color);

	box-sizing: border-box;
	border-top: solid 3px var(--back-col-0);
}



.dark-mode-toggle
{
	z-index: 500;
	cursor: pointer;
	user-select: none;
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	color: var(--theme-fore);
	background: var(--theme-back);
	border-radius: 0.5rem;
	padding: 0.5rem;

	font-size: 0.75rem;
	letter-spacing: 1px;

	box-shadow: 0 0 0.4rem hsl(0 0 100% / calc(1.0 - var(--theme-lightness))), -2px 2px 4px hsl(0 0 0 / calc(0.5 * var(--theme-lightness)));
	text-shadow: 0 0 0.4rem hsl(0 0 100% / calc(1.0 - var(--theme-lightness)));
	border: solid 2px var(--theme-fore);

	transition-property: scale, border-color, color, background-color;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.dark-mode-toggle:hover
{
	scale: 110%;
}

.dark-mode-toggle:hover:active
{
	border-color: var(--theme-back);
	color: var(--theme-back);
	background: var(--theme-red);
}



.head-area
{
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background-color: var(--theme-back);
}

.head-logo
{
	z-index: 5;
	position: absolute;
	left: 1rem;
	top: 50%;
	translate: 0 -50%;
	height: 3rem;
	background-color: var(--theme-back);
	shape-rendering: geometricPrecision;
	align-self: center;
}

@media screen and (aspect-ratio < 1.0)
{
	.head-logo
	{
		display: none;
	}
}


.head-menu
{
	z-index: 15;
	position: relative;
	display: flex;
	flex-shrink: 0.0;
	flex-grow: 0.0;

	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

	gap: 0.5rem;
	flex-basis: 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: solid 4px var(--theme-red);
}

.head-menu .button
{
	all: unset;

	cursor: pointer;
	flex-basis: fit-content;
	flex-grow: 0.0;
	flex-shrink: 1.0;
	padding: 0.2rem 0.5rem;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 1px;
	font-size: 0.8rem;
	font-weight: bold;
	color: #666;
	border-radius: 4px;

	align-content: center;
	text-align: center;


	transition-property: color, background-color, text-shadow;
	transition-duration: var(--animation-duration-short);
	transition-timing-function: var(--animation-ease);
}

.head-menu .button:hover
{
	background-color: var(--theme-red);
	color: var(--theme-back);
	text-shadow: -1px 1px 1px var(--shadow-color-bold);
}

.head-banner
{
	user-select: none;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	background-color: hsl(from var(--theme-red) h s l / 0.666);
	backdrop-filter: blur(2px);

	padding: 2rem;
	flex: 0 0 fit-content;
	text-shadow: 0rem 0.5rem 0.3rem var(--shadow-color);

	opacity: var(--reveal-content);
	transition-property: opacity;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.banner-logo
{
	align-self: center;
	max-width: 15rem;
	max-height: 80%;
}

.banner-title-root
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	font-weight: bolder;
	text-align: justify;
	color: white;
}

.banner-title
{
	font-size: 8rem;
	letter-spacing: 2.4rem;
}

.banner-subtitle
{
	align-self: center;
	text-align: center;
	font-size: 3rem;
	letter-spacing: 0.7rem;
}

@media (max-width:40rem)
{
	.banner-title
	{
		font-size: 4rem;
		letter-spacing: 1.2rem;
	}

	.banner-subtitle
	{
		font-size: 1.25rem;
		word-spacing: -0.4rem;
		letter-spacing: 0.925rem;
	}
}

.banner-acronym
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	font-weight: bolder;
	font-size: 2rem;
	letter-spacing: 0.25rem;
	color: #aaa;
	text-shadow: -1px 1px 1px var(--shadow-color-bold);
}

.banner-acronym-part
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	box-sizing: border-box;
}


.banner-acronym-part > b
{
	display: inline-block;
	width: 3rem;
	padding: 0;
	margin: 0;
	margin-right: 0.25rem;
	padding-right: 0.125rem;
	background-color: var(--theme-red);
	text-align: right;
	color: white;
	box-shadow: -0.5rem 0.5rem 0.2rem var(--shadow-color);
}













.section-separator
{
	position: relative;
	flex-grow: 0.0;
	flex-shrink: 0.0;

	background-color: var(--theme-back);
	width: 100%;
	height: 2rem;

	opacity: 100% !important;
}

.section-separator::after
{
	content: '';
	display: block;
	position: absolute;
	background-color: var(--theme-red);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: calc(100% - 10rem);
	height: 1px;

	opacity: var(--reveal-content);
	transition-property: opacity;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}







.section-root
{
	display: flex;
	background-color: var(--theme-back);
	flex-direction: column;
	flex-wrap: nowrap;
	padding-top: 2rem;
	padding-bottom: 2rem;

	padding-left: min(3rem, 5vw);
	padding-right: min(3rem, 5vw);

	flex-grow: 1.0;

	text-align: center;
}

.section-banner
{
	object-fit: cover;
	height: 12rem;
	flex-basis: 12rem;
	flex-shrink: 0.0;
	flex-grow: 0.0;
	object-position: 0% 0%;

	border-radius: 1rem 1rem 0 0;
	border-bottom: solid 12px var(--theme-red);

	box-shadow: -2px 2px 2px var(--shadow-color-bold);

	opacity: var(--reveal-content);

	transition-property: opacity, object-position;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.section-title
{
	color: var(--theme-red);
	padding: 0.5rem;
	letter-spacing: 0.25rem;
	font-weight: bold;
	font-size: 2.5rem;

	opacity: var(--reveal-content);
	translate: 0 calc(10% - 0.1 * var(--reveal-content));
	transition-property: opacity, translate;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.scroll-fade-in
{
	opacity: var(--reveal-content);
	transition-property: opacity;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.section-body
{
	text-align: justify;
	text-indent: 2rem;
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 1.5rem;
	font-family: sans-serif;
	letter-spacing: 0.05rem;
	word-spacing: 0.2rem;
	color: var(--theme-fore);

	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	padding-left: 1rem;
	padding-right: 1rem;

	opacity: var(--reveal-content);
	transition-property: opacity;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.section-buttons .button
{
	cursor: pointer;
	font-size: 0.9rem;
	letter-spacing: 0.1rem;
	color: var(--theme-red);

	border-radius: 3px;
	border: solid 3px var(--theme-red);
	padding: 0.6rem 0.8rem 0.6rem 0.8rem;
	margin: 1.5rem;

	opacity: var(--reveal-content);
	transition-property: background-color, color, text-shadow, opacity;
	transition-duration: var(--animation-duration-short);
	transition-timing-function: var(--animation-ease);
}

.section-buttons .button:hover
{
	color: var(--theme-back);
	background-color: var(--theme-red);
	text-shadow: -1px 1px 1px var(--shadow-color-bold);
}








.carousel
{
	z-index: 0;
	position: relative;
	flex-basis: 15rem;
	padding: 0.5rem;
	gap: 0.25rem;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	background-color: var(--theme-back);
}

.carousel-image
{
	z-index: 5;
	cursor: pointer;

	user-select: none;
	position: relative;
	flex-basis: 14rem;
	height: 14rem;
	flex-shrink: 0.0;
	flex-grow: 1.0;

	padding: 1rem;
	margin: 0;

	align-content: center;
	text-align: center;

	font-size: 2rem;
	color: var(--theme-back);

	box-sizing: border-box;
	overflow: hidden;
	object-fit: cover;
	border-radius: 2px;

	opacity: var(--reveal-content);
	translate: 0 calc(15% - 0.15 * var(--reveal-content));

	transition-property: opacity, translate;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.carousel-image:hover:active
{
	scale: 0.98;
}

.carousel-image b
{
	z-index: 25;
	display: block;
	position: absolute;
	inset: 0;
	text-align: center;
	align-content: center;
	padding: 1rem;
	text-shadow: -1px 1px 1px var(--shadow-color-bold);
	color: white;

	transition-property: translate, text-shadow;
	transition-duration: var(--animation-duration-short);
	transition-timing-function: var(--animation-ease);
}

.carousel-image:hover b
{
	translate: 0 -0.5rem;
	text-shadow: 0 0.5rem 3px var(--shadow-color-bold);
}

.carousel-image:hover:active b
{
	translate: 0 -0.25rem;
	text-shadow: 0 0.25rem 2px var(--shadow-color-bold);
}

.carousel-image span
{
	z-index: -25;
	pointer-events: none;
	display: block;
	position: absolute;
	inset: 0;
	background: none;

	transition-property: background-color;
	transition-duration: var(--animation-duration-short);
	transition-timing-function: var(--animation-ease);
}

.carousel-image:hover span
{
	background: hsl(from var(--theme-red) h s l / 0.25);
}

.carousel-image:hover:active span
{
	background: hsl(from var(--theme-red) h s l / 0.5);
}

.carousel-image img
{
	pointer-events: none;
	z-index: -50;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 25%;

	transition-property: object-position, scale;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.carousel-image:hover img
{
	object-position: 0 calc(25% - 0.5rem);
	scale: 105%;
}




.quote-area
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	padding-left: min(3rem, 5vw);
	padding-right: min(3rem, 5vw);
	padding-top: 2rem;
	padding-bottom: 2rem;
	gap: 0.5rem;
	justify-content: center;
	background-color: var(--theme-back);
}

.quote-root
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	flex-basis: 20rem;
	padding: 1rem;
	flex-grow: 1.0;
	flex-shrink: 1.0;
	font-family: 'Open Sans', sans-serif;

	opacity: var(--reveal-content);
	translate: 0 calc(15% - 0.15 * var(--reveal-content));
	transition-property: opacity, translate;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.quote-body
{
	flex-shrink: 0.0;
	flex-grow: 0.0;
	text-align: center;
	line-height: 1.333rem;
}

.quote-credit
{
	flex-shrink: 0.0;
	flex-grow: 0.0;
	color: var(--theme-red);
	text-align: center;
	padding-top: 1rem;
	font-style: italic;
}

.quote-credit::before
{
	content: '— ';
	color: var(--theme-red);
}








.logo-area
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding-left: min(3rem, 5vw);
	padding-right: min(3rem, 5vw);
	padding-top: 2rem;
	padding-bottom: 2rem;
	gap: 1rem;
	align-items: center;

	opacity: var(--reveal-content);
	transition-property: opacity;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}

.logo-area-logo
{
	flex-basis: fit-content;
	height: fit-content;
	padding: 0.5rem;
	border-radius: 1rem;

	flex-grow: 0.0;
	flex-shrink: 0.0;

	opacity: var(--reveal-content);
	translate: 0 calc(15% - 0.15 * var(--reveal-content));
	transition-property: opacity, translate, box-shadow, background-color, scale;
	transition-duration: var(--animation-duration-short);
	transition-timing-function: var(--animation-ease);
}

.logo-area-logo:hover
{
	scale: 120%;
	z-index: 50;
	box-shadow: -0.3rem 0.3rem 0.2rem #0004, 1px -1px 1px #0002, 0 0 0.25rem hsl(0 0 100% / calc(1.0 - var(--theme-lightness)));
	background-color: var(--theme-back);
}

.logo-area-logo[--click-url]
{
	cursor: pointer;
}


.logo-area-logo[--label]::after
{
	content: attr(--label);
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	min-width: 100%;
	text-wrap: nowrap;
	max-width: 20rem;
	min-height: 1.5rem;
	line-height: 1.5rem;
	padding: 0.5rem;
	font-size: 0.8rem;
	letter-spacing: 1px;
	color: var(--theme-red);
	align-content: center;
	text-align: center;
	translate: -50% calc(100% + 0.5rem);
	background-color: var(--theme-back);
	border-radius: 0.5rem;
	box-shadow: -0.3rem 0.3rem 0.2rem #0004, 1px -1px 1px #0002, 0 0 0.25rem hsl(0 0 100% / calc(1.0 - var(--theme-lightness)));

	opacity: 0%;
}

.logo-area-logo[--label]:hover::after
{
	opacity: 100%;
}



.logo-area-logo img
{
	max-width: 12rem;
	max-height: 6rem;
}

.logo-area-title
{
	text-align: center;
	flex-basis: 96%;

	color: var(--theme-red);
	font-size: 2.5rem;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 8px;
	letter-spacing: 0.2rem;
	word-spacing: 0.2rem;

	opacity: var(--reveal-content);
	translate: 0 calc(15% - 0.15 * var(--reveal-content));
	transition-property: opacity, translate;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}










.form-contact
{
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	flex-basis: fit-content;
	flex-grow: 1.0;
	flex-shrink: 0.0;
	gap: 0.5rem;
	padding: 0.5rem;

	background: hsl(0deg 0% 30% / 0.5);
	backdrop-filter: blur(3px) contrast(80%) brightness(80%);

	opacity: var(--reveal-content);
	transition-property: opacity;
	transition-duration: var(--animation-duration-long);
	transition-timing-function: var(--animation-ease);
}


.form-root
{
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;

	flex-basis: fit-content;
	flex-grow: 1.0;
	flex-shrink: 0.0;

	border-radius: 0.5rem;
	padding: 0.5rem;
	gap: 2px;

	color: var(--theme-back);
	background-color: hsl(from var(--theme-back) h s l / 0.05);
}

.form-title
{
	text-align: center;
	font-size: 1.25rem;
	color: white;
	background-color: hsl(from var(--theme-back) h s l / 0.05);
	letter-spacing: 2px;
	padding: 0.5rem 1rem 0.5rem 1rem;
	border-radius: 0.5rem;
}

.form-title > span
{
	color: hsl(from var(--theme-red) h s 50%);
}

.form-field-root
{
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-basis: fit-content;

	border-radius: 0.5rem;

	color: white;
}


.form-field-label
{
	flex-basis: 8rem;
	flex-grow: 0.0;
	flex-shrink: 1.0;

	text-align: right;
	align-content: start;
	font-weight: normal;

	letter-spacing: 1px;
	line-height: 1.2rem !important;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
}

@media screen and (aspect-ratio < 1.0)
{
	.form-field-label
	{
		flex-basis: 6rem;
		padding: 0.5rem;
	}
}

.form-field-root[ready]::after
{
	display: block;
	content: "✔";
	position: absolute;
	right: 0;
	top: 50%;
	translate: -1rem -50%;

	color: #0f0;
	text-shadow: -1px 1px 1px #000;
}

.form-field-root[invalid]::after
{
	display: block;
	content: "✖";
	position: absolute;
	right: 0;
	top: 50%;
	translate: -1rem -50%;

	color: #f80;
}

.form-field-root[invalid] .form-field-input
{
	--theme-back: hsl(from #f00 h 50% calc(50% + 20% * (var(--theme-lightness) - 0.5)));
	border-color: red !important;
}

.form-field-root:not([invalid])[ready] .form-field-input
{
	--theme-back: hsl(from #0f0 h 50% calc(50% + 20% * (var(--theme-lightness) - 0.5)));
	border-color: green !important;
}

.form-field-input
{
	all: unset;
	--background-alpha: 0.1;

	flex-basis: 0.0;
	flex-grow: 1.0;
	flex-shrink: 1.0;
	padding: 0.5rem 1rem 0.5rem 1rem;

	color: white;
	background: hsl(from var(--theme-back) h s l / var(--background-alpha));
	border: solid 2px transparent;

	font-family: sans-serif;

	border-radius: 0 !important;
	font-size: 1rem !important;
	line-height: 1.2rem !important;
	letter-spacing: 1px !important;
	min-height: 1.2rem;
	max-height: 80vh;
}

.form-field-input:hover
{
	--background-alpha: 0.222;
	color: var(--theme-fore);
}

.form-field-input:focus-within
{
	color: var(--theme-fore);
	--background-alpha: 0.444;
}

.form-field-input:hover:focus-within
{
	--background-alpha: 0.45;
	color: var(--theme-fore);
}

.form-button
{
	cursor: pointer;
	user-select: none;

	align-self: center;
	text-align: center;
	align-content: center;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 2px;
	padding: 0.5rem;
	border-radius: 0.5rem;

	border: solid 2px hsl(from var(--color) h s l / 0.05);
	background: hsl(from var(--color) h 50% l / 0.2);
	color: hsl(from var(--color) h s l / 0.2);

	transition-property: border-color, background-color, color;
	transition-duration: var(--animation-duration-short);
	transition-timing-function: var(--animation-ease);
}

.form-button:hover
{
	border: solid 2px hsl(from var(--color) h s l / 0.5);
	background: hsl(from var(--color) h 50% l / 0.3);
	color: hsl(from var(--color) h 60% l);
}

.form-button:hover:active
{
	border: solid 2px hsl(from var(--color) h s 35% / 0.5);
	background: hsl(from var(--color) h 50% 35% / 0.3);
	color: hsl(from var(--color) h 60% 35%);
}

.form-button[disabled]
{
	pointer-events: none !important;
	cursor: not-allowed !important;
	color: #aaa3 !important;
	background: #000a !important;
}



.form-information
{
	align-self: center;
	text-align: center;
	align-content: center;
	font-family: sans-serif;
	letter-spacing: 1px;
}




.form-contact > img
{
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	height: auto;
	object-fit: cover;
}













footer
{
	box-sizing: border-box;

	--extra-padding-bottom: 1.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	height: fit-content;
	background: var(--theme-back);
	padding: 0.5rem;
	padding-bottom: calc(0.5rem + var(--extra-padding-bottom));

	border-top: solid 4px var(--theme-red);
}


.footer-menu
{
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	gap: 0.5rem;
}

.footer-menu .button
{
	all: unset;

	position: relative;
	cursor: pointer;
	flex-basis: fit-content;
	flex-grow: 0.0;
	flex-shrink: 0.0;
	color: var(--theme-fore);
	padding: 0.5rem;
	border-radius: 4px;
	text-align: center;
	align-content: center;
	letter-spacing: 1px;

	transition-property: color, background-color, text-shadow;
	transition-duration: var(--animation-duration-short);
	transition-timing-function: var(--animation-ease);
}

.footer-menu .button:hover
{
	background-color: var(--theme-red);
	color: var(--theme-back);
	text-shadow: -1px 1px 1px var(--shadow-color-bold);
}



.footer-info
{
	position: relative;
	color: var(--theme-fore);
	font-family: 'Open Sans', sans-serif;
	font-size: 0.8rem;
	text-align: center;
	align-content: center;
	letter-spacing: 1px;
}





.button
{
	user-select: none;
}

.button:hover:active
{
	color: hsl(0deg 0% 50%) !important;
	background-color: hsl(from var(--theme-red) h s calc(l * 0.5)) !important;
	outline: solid 2px var(--theme-back);
}




*[disabled]
{
	pointer-events: none !important;
	color: var(--theme-red) !important;
	font-weight: bold;
}

*[hidden]
{
	display: none !important;
	pointer-events: none !important;
}