:root {
	--layer: #fffa;
	--layer2: #0003;
	--main: #25324d;
	--accent: #f4a148;
	--al: #92bdc4;
	--am: #586ac7;
	--ad: #25324d;

	--border: 1.6px solid #fff3;
	--text1: #eee;
	--text2: #333;
	--subtleText: #8885;

	--padding: clamp(3px, 0.1vw, 4px);
	--padding2: clamp(6px, 0.5vw, 8px);
	--padding4: clamp(12px, 1vw, 16px);
	--padding8: clamp(24px, 1.4vw, 32px);
	--padding16: clamp(48px, 5vw, 64px);
	--padding32: clamp(96px, 5vw, 128px);

	--shadow: 0 0 24px #0003;
	--shadow2: 0 0 24px #0005;
	--glow: 0 0 16px var(--accent);

	--slow: 1s;
	--quick: 0.5s;
	--delay: 0.1s;

	--smooth: linear(
		0,
		0.012 0.9%,
		0.05 2%,
		0.316 7.2%,
		0.466 10.5%,
		0.566 13.2%,
		0.653 16.1%,
		0.732 19.4%,
		0.796 22.9%,
		0.849 26.8%,
		0.892 31.1%,
		0.925 35.8%,
		0.95 41.1%,
		0.97 47.4%,
		0.987 58.7%,
		0.998 81.1%,
		1
	);
	--bounce: linear(
		0,
		0.008 1.1%,
		0.034 2.3%,
		0.073 3.5%,
		0.134 4.9%,
		0.264 7.3%,
		0.683 14.3%,
		0.797 16.5%,
		0.89 18.6%,
		0.967 20.7%,
		1.027 22.8%,
		1.073 25%,
		1.104 27.3%,
		1.123 30.6%,
		1.119 34.3%,
		1.101 37.7%,
		1.018 49.5%,
		0.998 54%,
		0.988 58.6%,
		0.985 65.2%,
		1.002 91.4%,
		1
	);

	--smooth2: cubic-bezier(0.65, 0.35, 0.05, 1);
	--bounce2: cubic-bezier(0.65, 0.35, 0.05, 1.8);

	--radius: 16px;
	--navHeight: 100px;

	--curve: polygon(
		100% 0%,
		0% 0%,
		0% 80%,
		0.5% 79.99%,
		1% 79.97%,
		1.5% 79.94%,
		2% 79.89%,
		2.5% 79.84%,
		3% 79.76%,
		3.5% 79.68%,
		4% 79.58%,
		4.5% 79.47%,
		5% 79.35%,
		5.5% 79.21%,
		6% 79.06%,
		6.5% 78.9%,
		7% 78.73%,
		7.5% 78.55%,
		8% 78.35%,
		8.5% 78.14%,
		9% 77.92%,
		9.5% 77.69%,
		10% 77.45%,
		10.5% 77.2%,
		11% 76.94%,
		11.5% 76.67%,
		12% 76.39%,
		12.5% 76.09%,
		13% 75.79%,
		13.5% 75.48%,
		14% 75.17%,
		14.5% 74.84%,
		15% 74.5%,
		15.5% 74.16%,
		16% 73.81%,
		16.5% 73.45%,
		17% 73.09%,
		17.5% 72.72%,
		18% 72.34%,
		18.5% 71.96%,
		19% 71.57%,
		19.5% 71.18%,
		20% 70.79%,
		20.5% 70.39%,
		21% 69.98%,
		21.5% 69.58%,
		22% 69.17%,
		22.5% 68.75%,
		23% 68.34%,
		23.5% 67.92%,
		24% 67.5%,
		24.5% 67.09%,
		25% 66.67%,
		25.5% 66.25%,
		26% 65.83%,
		26.5% 65.41%,
		27% 65%,
		27.5% 64.58%,
		28% 64.17%,
		28.5% 63.76%,
		29% 63.35%,
		29.5% 62.95%,
		30% 62.55%,
		30.5% 62.15%,
		31% 61.76%,
		31.5% 61.37%,
		32% 60.99%,
		32.5% 60.61%,
		33% 60.24%,
		33.5% 59.88%,
		34% 59.52%,
		34.5% 59.17%,
		35% 58.83%,
		35.5% 58.49%,
		36% 58.17%,
		36.5% 57.85%,
		37% 57.54%,
		37.5% 57.24%,
		38% 56.95%,
		38.5% 56.67%,
		39% 56.39%,
		39.5% 56.13%,
		40% 55.88%,
		40.5% 55.64%,
		41% 55.41%,
		41.5% 55.19%,
		42% 54.98%,
		42.5% 54.79%,
		43% 54.6%,
		43.5% 54.43%,
		44% 54.27%,
		44.5% 54.12%,
		45% 53.99%,
		45.5% 53.86%,
		46% 53.75%,
		46.5% 53.65%,
		47% 53.57%,
		47.5% 53.5%,
		48% 53.44%,
		48.5% 53.39%,
		49% 53.36%,
		49.5% 53.34%,
		50% 53.33%,
		50.5% 53.34%,
		51% 53.36%,
		51.5% 53.39%,
		52% 53.44%,
		52.5% 53.5%,
		53% 53.57%,
		53.5% 53.65%,
		54% 53.75%,
		54.5% 53.86%,
		55% 53.99%,
		55.5% 54.12%,
		56% 54.27%,
		56.5% 54.43%,
		57% 54.6%,
		57.5% 54.79%,
		58% 54.98%,
		58.5% 55.19%,
		59% 55.41%,
		59.5% 55.64%,
		60% 55.88%,
		60.5% 56.13%,
		61% 56.39%,
		61.5% 56.67%,
		62% 56.95%,
		62.5% 57.24%,
		63% 57.54%,
		63.5% 57.85%,
		64% 58.17%,
		64.5% 58.49%,
		65% 58.83%,
		65.5% 59.17%,
		66% 59.52%,
		66.5% 59.88%,
		67% 60.24%,
		67.5% 60.61%,
		68% 60.99%,
		68.5% 61.37%,
		69% 61.76%,
		69.5% 62.15%,
		70% 62.55%,
		70.5% 62.95%,
		71% 63.35%,
		71.5% 63.76%,
		72% 64.17%,
		72.5% 64.58%,
		73% 65%,
		73.5% 65.41%,
		74% 65.83%,
		74.5% 66.25%,
		75% 66.67%,
		75.5% 67.09%,
		76% 67.5%,
		76.5% 67.92%,
		77% 68.34%,
		77.5% 68.75%,
		78% 69.17%,
		78.5% 69.58%,
		79% 69.98%,
		79.5% 70.39%,
		80% 70.79%,
		80.5% 71.18%,
		81% 71.57%,
		81.5% 71.96%,
		82% 72.34%,
		82.5% 72.72%,
		83% 73.09%,
		83.5% 73.45%,
		84% 73.81%,
		84.5% 74.16%,
		85% 74.5%,
		85.5% 74.84%,
		86% 75.17%,
		86.5% 75.48%,
		87% 75.79%,
		87.5% 76.09%,
		88% 76.39%,
		88.5% 76.67%,
		89% 76.94%,
		89.5% 77.2%,
		90% 77.45%,
		90.5% 77.69%,
		91% 77.92%,
		91.5% 78.14%,
		92% 78.35%,
		92.5% 78.55%,
		93% 78.73%,
		93.5% 78.9%,
		94% 79.06%,
		94.5% 79.21%,
		95% 79.35%,
		95.5% 79.47%,
		96% 79.58%,
		96.5% 79.68%,
		97% 79.76%,
		97.5% 79.84%,
		98% 79.89%,
		98.5% 79.94%,
		99% 79.97%,
		99.5% 79.99%,
		100% 80%
	);
}

html, body, main {
    overflow-x: hidden;
}

@scope (main) {
	* {
		box-sizing: border-box;
	}

	section,
	div {
		display: flex;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.glass {
		background: var(--layer);
		backdrop-filter: blur(16px) saturate(120%) contrast(110%);
		box-shadow: var(--shadow);
		border-radius: var(--radius);
		border: var(--border);
		contain: layout paint;
		transform: translate3D(0);
		will-change: backdrop-filter, filter, opacity, height;
	}

	button {
		display: flex;
		position: relative;
		border: none;
		min-width: 140px;
		min-height: 48px;
		max-height: 48px;
		font-size: 1.1rem;
		font-weight: 500;
		--parentPadding: var(--padding2);
		border-radius: 48px;
		background:
			linear-gradient(90deg, var(--al), var(--ad)) center/cover,
			var(--al);
		color: var(--text1);
		box-shadow:
			var(--shadow),
			inset 0.8px 0.8px 4.8px #fff3,
			inset -0.8px -0.8px 4.8px #fff3;
		align-items: center;
		justify-content: center;
		isolation: isolate;
		overflow: hidden;
		contain: layout paint;
		transition:
			transform var(--quick) var(--bounce),
			filter var(--quick) var(--smooth);
		will-change: transform, filter;
		outline: none;
		cursor: pointer;

		&:hover {
			transform: scale(1.1);
			filter: brightness(110%);
		}

		&.active {
			transform: scale(0.85);
			filter: brightness(90%);
		}
	}

	:root {
		--layer: #fffa;
		--layer2: #0003;
		--main: #25324d;
		--accent: #f4a148;
		--al: #92bdc4;
		--am: #586ac7;
		--ad: #25324d;

		--border: 1.6px solid #fff3;
		--text1: #eee;
		--text2: #333;
		--subtleText: #8885;

		--padding: clamp(3px, 0.1vw, 4px);
		--padding2: clamp(6px, 0.5vw, 8px);
		--padding4: clamp(12px, 1vw, 16px);
		--padding8: clamp(24px, 1.4vw, 32px);
		--padding16: clamp(48px, 5vw, 64px);
		--padding32: clamp(96px, 5vw, 128px);

		--shadow: 0 0 24px #0003;
		--shadow2: 0 0 24px #0005;
		--glow: 0 0 16px var(--accent);

		--slow: 1s;
		--quick: 0.5s;
		--delay: 0.1s;

		--smooth: linear(
			0,
			0.012 0.9%,
			0.05 2%,
			0.316 7.2%,
			0.466 10.5%,
			0.566 13.2%,
			0.653 16.1%,
			0.732 19.4%,
			0.796 22.9%,
			0.849 26.8%,
			0.892 31.1%,
			0.925 35.8%,
			0.95 41.1%,
			0.97 47.4%,
			0.987 58.7%,
			0.998 81.1%,
			1
		);
		--bounce: linear(
			0,
			0.008 1.1%,
			0.034 2.3%,
			0.073 3.5%,
			0.134 4.9%,
			0.264 7.3%,
			0.683 14.3%,
			0.797 16.5%,
			0.89 18.6%,
			0.967 20.7%,
			1.027 22.8%,
			1.073 25%,
			1.104 27.3%,
			1.123 30.6%,
			1.119 34.3%,
			1.101 37.7%,
			1.018 49.5%,
			0.998 54%,
			0.988 58.6%,
			0.985 65.2%,
			1.002 91.4%,
			1
		);

		--smooth2: cubic-bezier(0.65, 0.35, 0.05, 1);
		--bounce2: cubic-bezier(0.65, 0.35, 0.05, 1.8);

		--radius: 16px;
		--navHeight: 100px;

		--curve: polygon(
			100% 0%,
			0% 0%,
			0% 80%,
			0.5% 79.99%,
			1% 79.97%,
			1.5% 79.94%,
			2% 79.89%,
			2.5% 79.84%,
			3% 79.76%,
			3.5% 79.68%,
			4% 79.58%,
			4.5% 79.47%,
			5% 79.35%,
			5.5% 79.21%,
			6% 79.06%,
			6.5% 78.9%,
			7% 78.73%,
			7.5% 78.55%,
			8% 78.35%,
			8.5% 78.14%,
			9% 77.92%,
			9.5% 77.69%,
			10% 77.45%,
			10.5% 77.2%,
			11% 76.94%,
			11.5% 76.67%,
			12% 76.39%,
			12.5% 76.09%,
			13% 75.79%,
			13.5% 75.48%,
			14% 75.17%,
			14.5% 74.84%,
			15% 74.5%,
			15.5% 74.16%,
			16% 73.81%,
			16.5% 73.45%,
			17% 73.09%,
			17.5% 72.72%,
			18% 72.34%,
			18.5% 71.96%,
			19% 71.57%,
			19.5% 71.18%,
			20% 70.79%,
			20.5% 70.39%,
			21% 69.98%,
			21.5% 69.58%,
			22% 69.17%,
			22.5% 68.75%,
			23% 68.34%,
			23.5% 67.92%,
			24% 67.5%,
			24.5% 67.09%,
			25% 66.67%,
			25.5% 66.25%,
			26% 65.83%,
			26.5% 65.41%,
			27% 65%,
			27.5% 64.58%,
			28% 64.17%,
			28.5% 63.76%,
			29% 63.35%,
			29.5% 62.95%,
			30% 62.55%,
			30.5% 62.15%,
			31% 61.76%,
			31.5% 61.37%,
			32% 60.99%,
			32.5% 60.61%,
			33% 60.24%,
			33.5% 59.88%,
			34% 59.52%,
			34.5% 59.17%,
			35% 58.83%,
			35.5% 58.49%,
			36% 58.17%,
			36.5% 57.85%,
			37% 57.54%,
			37.5% 57.24%,
			38% 56.95%,
			38.5% 56.67%,
			39% 56.39%,
			39.5% 56.13%,
			40% 55.88%,
			40.5% 55.64%,
			41% 55.41%,
			41.5% 55.19%,
			42% 54.98%,
			42.5% 54.79%,
			43% 54.6%,
			43.5% 54.43%,
			44% 54.27%,
			44.5% 54.12%,
			45% 53.99%,
			45.5% 53.86%,
			46% 53.75%,
			46.5% 53.65%,
			47% 53.57%,
			47.5% 53.5%,
			48% 53.44%,
			48.5% 53.39%,
			49% 53.36%,
			49.5% 53.34%,
			50% 53.33%,
			50.5% 53.34%,
			51% 53.36%,
			51.5% 53.39%,
			52% 53.44%,
			52.5% 53.5%,
			53% 53.57%,
			53.5% 53.65%,
			54% 53.75%,
			54.5% 53.86%,
			55% 53.99%,
			55.5% 54.12%,
			56% 54.27%,
			56.5% 54.43%,
			57% 54.6%,
			57.5% 54.79%,
			58% 54.98%,
			58.5% 55.19%,
			59% 55.41%,
			59.5% 55.64%,
			60% 55.88%,
			60.5% 56.13%,
			61% 56.39%,
			61.5% 56.67%,
			62% 56.95%,
			62.5% 57.24%,
			63% 57.54%,
			63.5% 57.85%,
			64% 58.17%,
			64.5% 58.49%,
			65% 58.83%,
			65.5% 59.17%,
			66% 59.52%,
			66.5% 59.88%,
			67% 60.24%,
			67.5% 60.61%,
			68% 60.99%,
			68.5% 61.37%,
			69% 61.76%,
			69.5% 62.15%,
			70% 62.55%,
			70.5% 62.95%,
			71% 63.35%,
			71.5% 63.76%,
			72% 64.17%,
			72.5% 64.58%,
			73% 65%,
			73.5% 65.41%,
			74% 65.83%,
			74.5% 66.25%,
			75% 66.67%,
			75.5% 67.09%,
			76% 67.5%,
			76.5% 67.92%,
			77% 68.34%,
			77.5% 68.75%,
			78% 69.17%,
			78.5% 69.58%,
			79% 69.98%,
			79.5% 70.39%,
			80% 70.79%,
			80.5% 71.18%,
			81% 71.57%,
			81.5% 71.96%,
			82% 72.34%,
			82.5% 72.72%,
			83% 73.09%,
			83.5% 73.45%,
			84% 73.81%,
			84.5% 74.16%,
			85% 74.5%,
			85.5% 74.84%,
			86% 75.17%,
			86.5% 75.48%,
			87% 75.79%,
			87.5% 76.09%,
			88% 76.39%,
			88.5% 76.67%,
			89% 76.94%,
			89.5% 77.2%,
			90% 77.45%,
			90.5% 77.69%,
			91% 77.92%,
			91.5% 78.14%,
			92% 78.35%,
			92.5% 78.55%,
			93% 78.73%,
			93.5% 78.9%,
			94% 79.06%,
			94.5% 79.21%,
			95% 79.35%,
			95.5% 79.47%,
			96% 79.58%,
			96.5% 79.68%,
			97% 79.76%,
			97.5% 79.84%,
			98% 79.89%,
			98.5% 79.94%,
			99% 79.97%,
			99.5% 79.99%,
			100% 80%
		);
	}

	.glass {
		background: var(--layer);
		backdrop-filter: blur(16px) saturate(120%) contrast(110%);
		box-shadow: var(--shadow);
		border-radius: var(--radius);
		border: var(--border);
		contain: layout paint;
		transform: translate3D(0);
		will-change: backdrop-filter, filter, opacity, height;
	}

	button {
		display: flex;
		position: relative;
		min-width: 140px;
		min-height: 48px;
		max-height: 48px;
		font-size: 1.1rem;
		font-weight: 500;
		--parentPadding: var(--padding2);
		border-radius: 48px;
		background:
			linear-gradient(90deg, var(--al), var(--ad)) center/cover,
			var(--al);
		color: var(--text1);
		box-shadow:
			var(--shadow),
			inset 0.8px 0.8px 4.8px #fff3,
			inset -0.8px -0.8px 4.8px #fff3;
		align-items: center;
		justify-content: center;
		isolation: isolate;
		overflow: hidden;
		contain: layout paint;
		transition:
			transform var(--quick) var(--bounce),
			filter var(--quick) var(--smooth);
		will-change: transform, filter;
		outline: none;
		cursor: pointer;

		&:hover {
			transform: scale(1.1);
			filter: brightness(110%);
		}

		&.active {
			transform: scale(0.85);
			filter: brightness(90%);
		}
	}

	:scope {
		display: block;
		width: 100%;
		height: max-content;
		transition: filter var(--slow) var(--smooth);
		will-change: filter;
		transform: translateZ(0);
	}

	section {
		display: flex;
		flex-flow: column nowrap;
		position: relative;
		width: 100%;
		overflow: hidden;
		padding: var(--padding8);
		align-items: center;
		justify-content: center;
		gap: var(--padding8);
	}

	.text {
		display: flex;
		flex-flow: column nowrap;
		width: min(100%, 768px);
		height: fit-content;
		text-align: justify;
		text-justify: inter-word;
		text-wrap: balance;
		text-align-last: center;
		color: var(--text);
		font-weight: 400;
		font-size: 1rem;
	}

	h1,
	h2,
	h3,
	h4,
	h5 {
		margin: 0;
		padding: 0;
		text-transform: capitalize;
	}

	h1 {
		font-size: clamp(2.2rem, 8vw, 4rem);
		font-weight: 600;
		color: #fff;
		text-shadow: var(--shadow);
	}

	h2 {
		font-size: clamp(1.5rem, 7vw, 3rem);
		font-weight: 600;
		color: #eee;
	}

	h3 {
		font-size: clamp(1.5rem, 3.5vw, 1.85rem);
		font-weight: 600;
		color: #000;
		text-align: center;

		span {
			font-size: 1.2em;
			font-weight: 600;
			color: var(--accent);
		}
	}

	#para > :ihs(h3) {
		color: #fff !important;
	}

	h4 {
		font-size: clamp(1.45rem, 3vw, 1.75rem);
		font-weight: 550;
		color: var(--accent);
	}

	h5 {
		font-size: clamp(1.15rem, 2vw, 1.25rem);
		font-weight: 550;
		color: #000;
		text-align: center;
	}

	p {
		all: inherit;
		display: inline;
		text-align: justify;
		text-align-last: center;
		text-justify: inter-character;

		.hlt {
			font-weight: 600;
		}
	}

	.ribbon::after {
		content: attr(data-ribbon);
		--width: 200px;
		--height: 52px;
		font-size: 0.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		position: absolute;
		top: 15px;
		right: -56px;
		background: linear-gradient(135deg, var(--accent), red);
		transform: rotate(45deg);
		width: var(--width);
		height: var(--height);
		box-shadow: var(--shadow);
		pointer-events: none;
	}
}