/* @link https://utopia.fyi/type/calculator?c=390,16,1.2,1440,25,1.25,5,5,1440&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
	--step--5: clamp(0.4019rem, 0.361rem + 0.1678cqi, 0.512rem);
	--step--4: clamp(0.4823rem, 0.4237rem + 0.2404cqi, 0.64rem);
	--step--3: clamp(0.5787rem, 0.4965rem + 0.3372cqi, 0.8rem);
	--step--2: clamp(0.6944rem, 0.581rem + 0.4656cqi, 1rem);
	--step--1: clamp(0.8333rem, 0.6786rem + 0.6349cqi, 1.25rem);
	--step-0: clamp(1rem, 0.7911rem + 0.8571cqi, 1.5625rem);
	--step-1: clamp(1.2rem, 0.9203rem + 1.1476cqi, 1.9531rem);
	--step-2: clamp(1.44rem, 1.068rem + 1.526cqi, 2.4414rem);
	--step-3: clamp(1.728rem, 1.2363rem + 2.0172cqi, 3.0518rem);
	--step-4: clamp(2.0736rem, 1.4269rem + 2.6531cqi, 3.8147rem);
	--step-5: clamp(2.4883rem, 1.6414rem + 3.4744cqi, 4.7684rem);
}

/* @link https://utopia.fyi/space/calculator?c=390,16,1.2,1440,25,1.25,5,2,&s=,1.2|1.8,s-l&g=s,l,xl,12 */
:root {
	--space-10: clamp(0.375rem, 0.2821rem + 0.381cqi, 0.625rem);
	--space-15: clamp(0.625rem, 0.5089rem + 0.4762cqi, 0.9375rem);
	--space-25: clamp(1rem, 0.7911rem + 0.8571cqi, 1.5625rem);
	--space-30: clamp(1.1875rem, 0.9321rem + 1.0476cqi, 1.875rem);
	--space-35: clamp(1.8125rem, 1.4411rem + 1.5238cqi, 2.8125rem);
	--space-45: clamp(1.8125rem, 1.4411rem + 1.5238cqi, 2.8125rem);
	--space-50: clamp(2rem, 1.5821rem + 1.7143cqi, 3.125rem);
}

:root {
	--color-bg-main: #97c7eb;
	--color-text-body: white;
	--color-text-highlight: black;

	--layout-text-max-width: min(900px, 100ch);

	--font-main: Cabin, sans-serif, system-ui;

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

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: never;
}

* {
	box-sizing: border-box;
}

body {
	background-color: var(--color-bg-main);
	margin: 0px;

	height: 100dvh;
	width: 100dvw;

	display: flex;
	flex-direction: column;

	padding-inline: var(--space-45);

	overflow: hidden;
}

/* @font-face {
	font-family: "Inter";
	src: url("/fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	src: url("/fonts/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2");
} */

@font-face {
	font-family: "Cabin";
	src: url("/fonts/Cabin-VariableFont_wdth,wght.woff2") format("woff2");
}

@font-face {
	font-family: "Cabin";
	font-style: italic;
	src: url("/fonts/Cabin-Italic-VariableFont_wdth,wght.woff2") format("woff2");
}

.page-parent {
	flex-grow: 1;
	padding-block: var(--space-45);
}

h1,
h2,
h3,
p,
a,
figcaption {
	margin: 0;
	font-family: var(--font-main);
}

.body-text {
	font-size: var(--step-0);

	font-variation-settings:
		"wght" 500,
		"wdth" 85;

	&>a {
		color: var(--color-text-body);

		font-variation-settings:
			"wght" 700,
			"wdth" 75;
	}
}

.width-constrained {
	max-width: var(--layout-text-max-width);
}