:root {
	--clr-primary: rgb(28,121,200);
	--clr-secondary: rgb(8,91,153);
	--clr-tertiary: rgb(9,33,45);

	--clr-accent: rgb(229,57,78);

	--background: linear-gradient(180deg, var(--clr-primary), var(--clr-secondary), var(--clr-tertiary));

	--fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
	--fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
	--fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
	--fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
	--fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
	--fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
	--fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
	--fs-1000: clamp(5.2rem, calc(2.46rem + 6.5vw), 12rem);
}

html {
	margin: 0;
	padding: 0;

	font-family: "range-sans-variable", sans-serif;
	font-variation-settings: "wght" 300;
	font-size: var(--fs-400);
}

body {
	margin: 0;
	padding: 0;

	color: #ffffff;
	background-color: var(--clr-tertiary);
}

main {
	border-bottom: 10px solid var(--clr-secondary);
}

section {
}

h1, h2, h3 {
	margin: 1rem;
}

h1 {
	margin: 1rem;
	color: var(--clr-primary);
	font-size: var(--fs-800);
	font-variation-settings: "wght" 100;
}

h2 {
	margin: 1rem;
	color: var(--clr-tertiary);
	font-size: var(--fs-400);
	font-variation-settings: "wght" 700;
}

p {
	margin: 1rem;
}

.hero {
	min-height: 100dvh;

	display: grid;
	place-items: end center;
}

.content {
	max-width: 65ch;
	margin-inline: auto;
	
	padding-block: 1rem;
	text-align: center;
}

.the-line {
	height: 600dvh;
	margin-inline: auto;
	transform: translateX(2px);

	--s: 2px; /* size of the wave */
	--b: 1px; /* thickness of the line */
	--m: 0.5; /* curvature of the wave [0 2] */
	
	background: var(--clr-primary);
	--R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
	width: calc(2*var(--R));
	--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
	mask:
	  radial-gradient(var(--R) at top 50% right calc(-1*var(--m)*var(--s)), var(--_g)) 
	   calc(50% - var(--s)/2 - var(--b)/2) calc(50% - 2*var(--s))/calc(var(--s) + var(--b)) calc(4*var(--s)) repeat-y,
	  radial-gradient(var(--R) at top 50% left calc(-1*var(--m)*var(--s)),var(--_g)) 
	   calc(50% + var(--s)/2 + var(--b)/2) 50%/calc(var(--s) + var(--b)) calc(4*var(--s)) repeat-y;
}

#d52 {
	margin: 1rem;
	scale: 1;
	transform-origin: bottom;

	.box {
		fill: #ffffff;
	}

	.five {
		fill: var(--clr-primary);
	}

	.two {
		fill: var(--clr-primary);
	}
}

@media (prefers-reduced-motion: no-preference) {
	body {
		animation: bg-color linear;
		animation-timeline: scroll(y);
	}

	@keyframes bg-color {
		from {background-color: var(--clr-tertiary);}
		to {background-color: var(--clr-primary);}
	}

	#d52 {
		animation: main-logo linear;
		animation-timeline: view();
		animation-range: exit -50vh;
	}

	@keyframes main-logo {
		to {
			scale: 0.25;
		}
	}
}