:root {
	--loader-background-color: #faf6f6;
	--loader-primary-color: #a02c34;
	--loader-primary-contrast-color: #ffffff;
	--loader-text-color: #2c1d20;
}

:root[data-theme="dark"] {
	--loader-background-color: #170d10;
	--loader-primary-color: #da3444;
	--loader-primary-contrast-color: #2a0b10;
	--loader-text-color: #fff7f8;
}

html {
	color-scheme: var(--mud-native-html-color-scheme, normal);
}

html,
body {
	margin: 0;
	min-height: 100%;
	color: var(--mud-palette-text-primary, var(--loader-text-color));
	background-color: var(--mud-palette-background, var(--loader-background-color));
	font-family: Inter, "Segoe UI", Arial, sans-serif;
}

a {
	color: inherit;
}

#app {
	min-height: 100vh;
}

.loading-screen {
	position: relative;
	--loader-size: 100px;
	display: block;
	min-height: 100vh;
	overflow: hidden;
	background-color: var(--loader-background-color);
}

.loading-content {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
}

.loading-mark {
	position: relative;
	width: var(--loader-size);
	height: var(--loader-size);
}

.loading-ring.mud-progress-circular {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	color: var(--loader-primary-color);
}

.loading-ring .mud-progress-circular-svg {
	width: 100%;
	height: 100%;
}

.loading-logo-surface {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	width: 70%;
	height: 70%;
	place-items: center;
	background: var(--loader-primary-color);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.loading-logo {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 13% 0% 13% 13%;
	color: var(--loader-primary-contrast-color);
}

@media (prefers-reduced-motion: reduce) {
	.loading-ring.mud-progress-circular,
	.loading-ring .mud-progress-circular-circle {
		animation: none;
	}
}