:root {
	--color-body: hsl(0, 0%, 95%);
	--color-secondary: hsl(0, 0%, 65%);
	--color-placeholder: hsl(0, 0%, 55%);
	--color-disabled: hsl(0, 0%, 40%);
	--color-inverse: hsl(0, 0%, 10%);

	--color-info: hsl(215, 90%, 85%);
	--color-success: hsl(120, 75%, 80%);
	--color-warning: hsl(25, 100%, 80%);
	--color-danger: hsl(0, 100%, 85%);

	--color-primary: hsl(255, 90%, 60%);
	--color-primary-hover: hsl(255, 90%, 55%);
	--color-primary-active: hsl(255, 90%, 50%);
	--color-primary-contrast: hsl(0, 0%, 95%);

	--color-primary-light: hsl(255, 90%, 25%);
	--color-primary-light-hover: hsl(255, 90%, 20%);
	--color-primary-light-active: hsl(255, 90%, 15%);

	--background-color-body: hsl(0, 0%, 10%);
	--background-color-secondary: hsl(0, 0%, 15%);
	--background-color-tertiary: hsl(0, 0%, 20%);
	--background-color-disabled: hsl(0, 0%, 90%, 10%);
	--background-color-light: hsl(0, 0%, 25%);

	--background-color-info: hsl(215, 50%, 70%, 10%);
	--background-color-success: hsl(120, 50%, 65%, 10%);
	--background-color-warning: hsl(25, 70%, 65%, 10%);
	--background-color-danger: hsl(0, 75%, 75%, 10%);

	--border-color-body: hsl(0, 0%, 20%);
	--border-color-hover: hsl(0, 0%, 30%);
	--border-color-split: hsl(0, 0%, 15%);
	--border-color-disabled: hsl(0, 0%, 65%);

	--btn-background-color: hsl(0, 0%, 30%);
	--btn-background-color-hover: hsl(0, 0%, 25%);
	--btn-background-color-active: hsl(0, 0%, 20%);
	--btn-background-color-disabled: var(--background-color-disabled);

	--btn-color: var(--color-body);
	--btn-color-disabled: var(--color-disabled);

	--input-background: hsl(0, 0%, 15%);
	--input-background-disabled: var(--background-color-disabled);

	--border-width-small: max(1px, 0.0625em);
	--border-width: max(2px, 0.125em);
	--border-radius-small: 0.25rem;
	--border-radius: 0.5rem;
	--border-radius-large: 0.75rem;
	--border-radius-pill: 2.5rem;
	--border-radius-circle: 100%;

	--font-size-tiny: 0.75em;
	--font-size-small: 0.875em;
	--font-size-normal: 1em;
	--font-size-large: 1.125em;
	--font-size-larger: 1.25em;
	--font-size-huge: 1.5em;

	--font-size-h1: 1.75em;
	--font-size-h2: 1.5em;
	--font-size-h3: 1.25em;
	--font-size-h4: 1.125em;
	--font-size-h5: 1em;
	--font-size-h6: 0.875em;

	--spacing-tiny: 0.125em;
	--spacing-small: 0.25em;
	--spacing-medium: 0.5em;
	--spacing-large: 1em;
	--spacing-larger: 1.125em;
	--spacing-huge: 1.25em;

	--animation-duration-short: 80ms;
	--animation-duration: 120ms;
	--animation-duration-long: 160ms;
	--animation-curve: cubic-bezier(0.33, 1, 0.66, 1);
}

*, *::before, *::after {
	box-sizing: border-box;
}

:disabled {
	cursor: not-allowed;
}

html {
	font-family: system-ui, -apple-system, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	font-feature-settings: 'tnum', 'ss03';
	line-height: 1.5;
}

html,
body {
	width: 100%;
	min-height: 100svb;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--background-color-body);
	color: var(--color-body);
	accent-color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin-block: 0 var(--spacing-medium);
}

h1 {
	font-size: var(--font-size-h1);
	line-height: 1.2;
	-webkit-hyphens: none;
	hyphens: none;
	font-weight: bolder;
}

h2 {
	font-size: var(--font-size-h2);
	line-height: 1.2;
	-webkit-hyphens: none;
	hyphens: none;
	font-weight: bolder;
}

h3 {
	font-size: var(--font-size-h3);
	line-height: 1.25;
}

h4 {
	font-size: var(--font-size-h4);
	line-height: 1.375;
}

h5 {
	font-size: var(--font-size-h5);
}

h6 {
	font-size: var(--font-size-h6);
}

img {
	display: block;
	width: 100%;
	max-width: 100%;

	margin-block: 0 1em;
	margin-inline: auto;
	padding: 0;

	object-fit: cover;
}

table {
	padding: 0;
	margin-block: 0 1em;
	margin-inline: 0;

	background-color: var(--background-color-body);
	color: var(--color-body);

	border: var(--border-width-small) solid var(--border-color-body);
	border-collapse: collapse;

	font-size: var(--font-size-normal);

	& thead {
		border-start-start-radius: var(--border-radius);
		border-start-end-radius: var(--border-radius);

		padding: 0;
		margin: 0;
		border: 0;
	}

	& tbody {
		padding: 0;
		margin: 0;
		border: 0;
	}

	& th,
	& td {
		padding: var(--spacing-small);

		background-color: transparent;
		color: inherit;

		border: var(--border-width-small) solid var(--border-color-body);

		font-size: var(--font-size-normal);
	}
}

a:not(.btn) {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-color: currentColor;

	&:hover {
		color: var(--color-primary-hover);
	}

	&:active {
		color: var(--color-primary-active);
	}
}

button,
.btn,
summary,
select,
optgroup,
option,
details summary,
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="color"],
input[type="file"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
	-ms-touch-action: manipulation;
	touch-action: manipulation;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input,
textarea {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}

textarea {
	--min-rows: 1lh;

	resize: block;
	min-block-size: calc(var(--min-rows) + var(--spacing-medium) * 2 + var(--border-width) * 2);
}

:where(input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"], select, button, details summary):not(:disabled) {
	cursor: pointer;
}

:-moz-submit-invalid {
	box-shadow: none;
}

:-moz-ui-invalid {
	box-shadow: none;
}

button,
.btn,
input,
select,
textarea,
label {
	vertical-align: middle;
}

button,
.btn,
input,
select,
textarea,
optgroup,
option,
table {
	font: inherit;
	line-height: inherit;
	color: inherit;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	padding-inline: var(--spacing-medium) calc(var(--spacing-medium) + var(--spacing-larger));

	background-color: var(--background-color-secondary);
	color: var(--color-body);

	border: var(--border-width-small) solid var(--border-color-body);
}

input {
	--outline-offset: 0;

	--bg: var(--input-background);
	--fg: var(--color-body);
	--border: var(--border-color-body);

	display: block;
	min-inline-size: 5ch;
	max-inline-size: 100%;

	padding: var(--spacing-medium);
	margin: 0;

	background-color: var(--bg);
	color: var(--fg);

	border: var(--border-width) solid var(--border);
	border-radius: var(--border-radius-small);

	transition: var(--animation-duration) ease;
	transition-property: background-color, border, color, outline;

	&:hover {
		--border: var(--border-color-hover);
	}

	&:focus {
		--border: var(--border-color-split);
	}

	&::-ms-reveal {
		color: currentColor;
	}

	&::-webkit-credentials-auto-fill-button {
		color: currentColor;
	}

	&::-webkit-contacts-auto-fill-button {
		background-color: currentColor;
		cursor: pointer;
	}

	&::-webkit-search-cancel-button,
	&::-webkit-inner-spin-button,
	&::-webkit-credentials-auto-fill-button,
	&::-webkit-caps-lock-indicator {
		color: currentColor;
		cursor: pointer;
	}

	&.input-disabled,
	&:disabled,
	&[disabled] {
		&,
		&:hover,
		&:focus,
		&:active {
			--background: var(--background-color-disabled);
			--border: var(--border-color-disabled);
			--color: var(--color-disabled);
		}
	}
}

input[type="radio"],
input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;

	position: relative;
	display: inline-block;
	min-inline-size: unset;

	padding: 0;
	margin: 0;

	width: 1em;
	height: 1em;

	line-height: 0;
	font-size: var(--font-size-large);

	vertical-align: middle;
	z-index: 0;
	overflow: visible;

	&:not(:disabled):hover {
		--border: var(--color-primary);
	}
}

input[type="radio"] {
	--color: var(--border);

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

	&::before {
		content: '';

		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;

		width: 0;
		height: 0;

		background-color: currentColor;

		border-radius: var(--border-radius-circle);
		z-index: 1;

		transition: var(--animation-duration) var(--animation-curve);
		transition-property: width, height, background-color;
		transform: translateZ(0) translate(-50%, -50%);
	}

	&:not(:disabled):active {
		--border: var(--color-primary-light);

		&::before {
			width: 0.375em;
			height: 0.375em;
		}
	}

	&:checked {
		--border: var(--color-primary);

		&::before {
			width: 0.5em;
			height: 0.5em;
		}

		&:hover {
			--border: var(--color-primary-light);
		}
	}
}

input[type="checkbox"] {
	--color: var(--background-color-body);

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

	&::before {
		content: '';

		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;

		background-color: currentColor;
		opacity: 0;

		transform: scale(.001);
		transition: transform .25s cubic-bezier(.7, -.45, .3, 1.45), opacity var(--animation-duration) var(--animation-curve);
		clip-path: polygon(76.831% 24.747%, 77.811% 23.946%, 80.056% 23.031%, 82.444% 23.031%, 84.689% 23.946%, 85.669% 24.747%, 86.417% 25.648%, 87.327% 27.701%, 87.457% 29.904%, 86.807% 32.031%, 86.189% 32.997%, 85.669% 33.586%, 44.003% 75.253%, 43.102% 76%, 41.049% 76.91%, 38.846% 77.04%, 36.719% 76.39%, 35.753% 75.773%, 35.164% 75.253%, 14.331% 54.419%, 13.53% 53.439%, 12.614% 51.194%, 12.614% 48.806%, 13.53% 46.561%, 14.331% 45.581%, 15.231% 44.833%, 17.285% 43.923%, 19.487% 43.793%, 21.615% 44.443%, 22.581% 45.061%, 23.169% 45.581%, 39.579% 61.994%, 76.831% 24.747%, 76.831% 24.747%);
		z-index: 1;
	}

	&:not(:disabled):not(:checked):active {
		border-width: calc(var(--border-width) * 2);
	}

	&:checked {
		--background: var(--color-primary);
		--border: var(--color-primary);

		&:hover {
			--background: var(--color-primary-light);
			--border: var(--color-primary-light);
		}

		&:active {
			--background: var(--color-primary);
			--border: var(--color-primary);
		}

		&::before {
			transform: scale(1);
			opacity: 1;
		}
	}

	&:disabled {
		&::before {
			--color: var(--border-color-disabled);
		}
	}
}

button,
.btn {
	--bg: var(--btn-background-color);
	--fg: var(--btn-color);

	position: relative;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-small);

	min-inline-size: 5em;
	max-inline-size: 100%;
	padding-block: var(--spacing-small);
	padding-inline: var(--spacing-medium);

	background-color: var(--bg);
	color: var(--fg);

	border: var(--border-width) solid transparent;
	border-radius: var(--border-radius-small);

	text-decoration: none;
	font-weight: normal;

	transform-origin: center;
	transition: var(--animation-duration-short) var(--animation-curve);
	transition-property: background-color, color, transform, outline;

	z-index: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;

	&:hover {
		--bg: var(--btn-background-color-hover);
	}

	&:not(.btn-text, .btn-link, :disabled):active {
		animation-duration: var(--animation-duration);
		transform: scale(0.975);
	}

	&:not(.btn-text) {
		box-shadow: 0 .125em 1em -.25em rgb(0 0 0 / .5);
	}

	&.btn-light {
		--bg: hsl(0, 0%, 100%, 10%);
		--fg: var(--color-body);

		&:hover {
			--bg: hsl(0, 0%, 100%, 15%);
		}

		&:active {
			--bg: hsl(0, 0%, 100%, 20%);
		}
	}

	&.btn-link {
		--bg: transparent;
		--fg: var(--color-primary);

		min-width: auto;
		padding: 0;

		text-decoration: underline;

		border: none;
		box-shadow: none;

		&:hover {
			--fg: var(--color-primary-hover);
		}

		&:hover {
			--fg: var(--color-primary-active);
		}
	}

	&.btn-text {
		--bg: transparent;
		--fg: inherit;
		min-inline-size: auto;

		&:hover {
			--bg: transparent;
			--fg: var(--color-secondary);
		}

		&:active {
			--bg: transparent;
			--fg: var(--color-body)
		}
	}

	&.btn-primary {
		--bg: var(--color-primary);
		--fg: var(--color-primary-contrast);

		&:hover {
			--bg: var(--color-primary-hover);
		}

		&:active {
			--bg: var(--color-primary-active);
		}
	}

	&.btn-primary-light {
		--bg: var(--color-primary-light);
		--fg: var(--color-primary-contrast);

		&:hover {
			--bg: var(--color-primary-light-hover);
		}

		&:active {
			--bg: var(--color-primary-light-active);
		}
	}

	&.btn-icon {
		min-inline-size: unset;
		padding: var(--spacing-medium);
		line-height: 0;

		& > svg {
			font-size: var(--font-size-huge);
		}
	}

	&.btn-block {
		display: block;
		width: 100%;
	}

	&.btn-lg {
		padding-block: var(--spacing-small);
		padding-inline: var(--spacing-medium);
	}

	&:not(.btn-disabled),
	&:not(:disabled) {
		cursor: pointer;
	}

	&.btn-disabled,
	&:disabled {
		&,
		&:hover,
		&:focus,
		&:active {
			--bg: var(--btn-background-color-disabled);
			--fg: var(--btn-color-disabled);
			text-shadow: none;
		}
	}
}

svg {
	display: inline-block;
	vertical-align: -0.125em;
	line-height: 0;
	transform: translateZ(0);
}

.alert {
	--bg: var(--background-color-secondary);

	display: block;

	padding: var(--spacing-large);
	margin-block: 0 var(--spacing-medium);

	background-color: var(--bg);
	color: inherit;

	border-radius: var(--border-radius);
	font-size: 1em;

	&.alert-info {
		--bg: var(--background-color-info);
	}

	&.alert-success {
		--bg: var(--background-color-success);
	}

	&.alert-warning {
		--bg: var(--background-color-warning);
	}

	&.alert-danger {
		--bg: var(--background-color-danger);
	}

	&.alert-glowing {
		-webkit-box-shadow: 0 0 2em 0.5em var(--bg);
		-moz-box-shadow: 0 0 2em 0.5em var(--bg);
		box-shadow: 0 0 2em 0.5em var(--bg);
	}
}

.badge {
	display: inline-block;
	max-inline-size: 12rem;

	padding-block: var(--spacing-medium);
	padding-inline: var(--spacing-large);

	background-color: var(--background-color-secondary);
	color: inherit;

	border-radius: var(--border-radius-pill);
	border: var(--border-width) solid transparent;

	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
	overflow: hidden;

	&.badge-info {
		background-color: var(--background-color-info);
		color: var(--color-info);
	}

	&.badge-success {
		background-color: var(--background-color-success);
		color: var(--color-success);
	}

	&.badge-warning {
		background-color: var(--background-color-warning);
		color: var(--color-warning);
	}

	&.badge-danger {
		background-color: var(--background-color-danger);
		color: var(--color-danger);
	}
}

a[href].badge:is(:hover, :focus),
button.badge:is(:hover, :focus) {
	background-color: var(--background-color-tertiary);
	color: var(--color-body);
}

.visually-hidden {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0 0 0 0);
}

.centered-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-medium);
	
	height: 100%;
	width: fit-content;
	
	margin-inline: auto;
}

.app-logo > svg {
	font-size: 3rem;

	background-color: var(--color-primary);
	color: var(--color-body);

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

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

.blazor-error-boundary::after {
	content: "An error has occurred."
}