:root {
	color-scheme: light;
	--background: #f6f4ef;
	--foreground: #44433f;
	--orange: #f26305;
	--purple: #8552a4;
}

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

html {
	min-height: 100%;
	background: var(--background);
}

body {
	min-height: 100svh;
	margin: 0;
	background:
		radial-gradient(circle at 13% 19%, rgba(242, 99, 5, 0.08), transparent 18rem),
		radial-gradient(circle at 88% 83%, rgba(133, 82, 164, 0.09), transparent 19rem),
		var(--background);
	color: var(--foreground);
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.construction {
	display: grid;
	min-height: 100svh;
	place-items: center;
	padding: clamp(2rem, 7vw, 5rem);
}

.construction__content {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: clamp(2.75rem, 7vh, 4.75rem);
	width: min(100%, 64rem);
	text-align: center;
}

.logo {
	display: block;
	width: min(100%, 64rem);
	height: auto;
	user-select: none;
}

.message {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	margin: 0;
	color: var(--foreground);
	font-size: clamp(0.75rem, 1.8vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.42em;
	line-height: 1;
	text-transform: uppercase;
}

.message::before,
.message::after {
	display: block;
	width: clamp(2.5rem, 8vw, 5.5rem);
	height: 1px;
	background: linear-gradient(90deg, var(--orange), var(--purple));
	content: "";
}

@media (max-width: 34rem) {
	.message {
		gap: 0.8rem;
		letter-spacing: 0.3em;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.construction__content {
		animation: appear 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes appear {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}