/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1480,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|s-xl|s-2xl|s-3xl|m-xl|m-2xl|m-3xl|l-2xl|l-3xl|xl-3xl&g=2xs,l,2xl,12 */
:root
{
	--step--2: clamp(0.6944rem, 0.6653rem + 0.1456vi, 0.8rem);
	--step--1: clamp(0.8333rem, 0.7874rem + 0.2299vi, 1rem);
	--step-0: clamp(1rem, 0.931rem + 0.3448vi, 1.25rem);
	--step-1: clamp(1.2rem, 1.1rem + 0.5vi, 1.5625rem);
	--step-2: clamp(1.44rem, 1.2984rem + 0.7078vi, 1.9531rem);
	--step-3: clamp(1.728rem, 1.5312rem + 0.984vi, 2.4414rem);
	--step-4: clamp(2.0736rem, 1.8038rem + 1.3492vi, 3.0518rem);
	--step-5: clamp(2.4883rem, 2.1224rem + 1.8295vi, 3.8147rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1480,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|s-xl|s-2xl|s-3xl|m-xl|m-2xl|m-3xl|l-2xl|l-3xl|xl-3xl&g=2xs,l,2xl,12 */
:root
{
	--space-3xs: clamp(0.25rem, 0.2328rem + 0.0862vi, 0.3125rem);
	--space-2xs: clamp(0.5rem, 0.4655rem + 0.1724vi, 0.625rem);
	--space-xs: clamp(0.75rem, 0.6983rem + 0.2586vi, 0.9375rem);
	--space-s: clamp(1rem, 0.931rem + 0.3448vi, 1.25rem);
	--space-m: clamp(1.5rem, 1.3966rem + 0.5172vi, 1.875rem);
	--space-l: clamp(2rem, 1.8621rem + 0.6897vi, 2.5rem);
	--space-xl: clamp(3rem, 2.7931rem + 1.0345vi, 3.75rem);
	--space-2xl: clamp(4rem, 3.7241rem + 1.3793vi, 5rem);
	--space-3xl: clamp(6rem, 5.5862rem + 2.069vi, 7.5rem);
	/* One-up pairs */
	--space-3xs-2xs: clamp(0.25rem, 0.1466rem + 0.5172vi, 0.625rem);
	--space-2xs-xs: clamp(0.5rem, 0.3793rem + 0.6034vi, 0.9375rem);
	--space-xs-s: clamp(0.75rem, 0.6121rem + 0.6897vi, 1.25rem);
	--space-s-m: clamp(1rem, 0.7586rem + 1.2069vi, 1.875rem);
	--space-m-l: clamp(1.5rem, 1.2241rem + 1.3793vi, 2.5rem);
	--space-l-xl: clamp(2rem, 1.5172rem + 2.4138vi, 3.75rem);
	--space-xl-2xl: clamp(3rem, 2.4483rem + 2.7586vi, 5rem);
	--space-2xl-3xl: clamp(4rem, 3.0345rem + 4.8276vi, 7.5rem);
	/* Custom pairs */
	--space-s-l: clamp(1rem, 0.5862rem + 2.069vi, 2.5rem);
	--space-s-xl: clamp(1rem, 0.2414rem + 3.7931vi, 3.75rem);
	--space-s-2xl: clamp(1rem, -0.1034rem + 5.5172vi, 5rem);
	--space-s-3xl: clamp(1rem, -0.7931rem + 8.9655vi, 7.5rem);
	--space-m-xl: clamp(1.5rem, 0.8793rem + 3.1034vi, 3.75rem);
	--space-m-2xl: clamp(1.5rem, 0.5345rem + 4.8276vi, 5rem);
	--space-m-3xl: clamp(1.5rem, -0.1552rem + 8.2759vi, 7.5rem);
	--space-l-2xl: clamp(2rem, 1.1724rem + 4.1379vi, 5rem);
	--space-l-3xl: clamp(2rem, 0.4828rem + 7.5862vi, 7.5rem);
	--space-xl-3xl: clamp(3rem, 1.7586rem + 6.2069vi, 7.5rem);
}

body
{
	margin: 0;
	min-block-size: 100vh;
	min-inline-size: 100vw;
	background-color: #17524A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--step-0);
}

.card
{
	max-inline-size: calc(15 * var(--space-3xl));
	min-inline-size: 320px;
	min-block-size: fit-content;
	padding: var(--space-s);
	margin-inline: var(--space-xs);
	margin-block: var(--space-xs);
	color: #17524A;
	border: solid color-mix(in oklch, #17524A, whitesmoke 40%) var(--space-s);
	background-color: #FFFFFF;
	border-radius: var(--space-m);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#logo
{
	max-block-size: calc(2 * var(--space-3xl));
}

#title
{
	font-family: arial, Helvetica, sans-serif;
}

.stack
{
	margin-inline: var(--space-xs);
	margin-block: var(--space-xs);
}

.stack *+*
{
	margin-block-start: var(--space-2xs);
	text-align: center;
}