:root {
	color: black;
	--primary-color: black;
	--secondary-color: hsl(40, 35%, 88%);
	--bg-color-1: hsl(40, 45%, 98.5%);
	--bg-color-2: hsl(40, 50%, 95.5%);
	--bg-color-3: hsl(40, 55%, 92%);
	--bg-color-4: hsl(40, 60%, 88%);
	--secondary-bg-color: hsl(40, 35%, 86%);

	@media (prefers-color-scheme: dark) {
		color: white;
		--primary-color: white;
		--secondary-color: hsl(180, 28%, 14%);
		--bg-color-1: hsl(180, 44%, 8%);
		--bg-color-2: hsl(180, 42%, 6.5%);
		--bg-color-3: hsl(180, 40%, 5.5%);
		--bg-color-4: hsl(180, 38%, 5%);
		--secondary-bg-color: hsl(180, 28%, 10%);
	}
}

:root {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100dvh;

	background: linear-gradient(135deg, var(--bg-color-1) 0%, var(--bg-color-4) 100%);

	&,
	button {
		font-family: Inter, sans-serif;
		font-feature-settings:
			'liga' 1,
			'calt' 1,
			'case' 1,
			'ss01' 1,
			'ss02' 1,
			'ss07' 1,
			'ss08' 1;
	}
}

@supports (font-variation-settings: normal) {
	:root {
		font-family: InterVariable, sans-serif;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

main {
	width: 100%;
	height: 100%;
}

l1 {
	font-size: min(14vw, 7rem);
	font-weight: 500;
}

l2 {
	font-size: min(10vw, 5rem);
	font-weight: 500;
}

l3 {
	font-size: min(8vw, 4rem);
	font-weight: 500;
}

l4 {
	font-size: min(6vw, 3.5rem);
	font-weight: 500;
}

p,
footer {
	font-size: min(4vw, 1rem);
}

footer {
	font-weight: 300;
}

a {
	color: var(--primary-color);
	text-decoration: none;
}

button:hover {
	cursor: pointer;
}

.vstack {
	display: flex;
	flex-direction: column;
}

.hstack {
	display: flex;
	flex-direction: row;
}

.vcenter {
	align-items: center;
}

.hcenter {
	justify-content: center;
}

.space-between {
	justify-content: space-between;
}

.d-gap {
	gap: 0.4rem;
}

.b-gap {
	gap: 0.8rem;
}

.l-gap {
	gap: 1.2rem;
}