@font-face {
	font-family: 'Rubik';
	src: url('./fonts/rubik-extra-bold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'Rubik';
	src: url('./fonts/rubik-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Rubik';
	src: url('./fonts/rubik-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}

:root {
	--black: rgba(10, 10, 10, 1);
	--black-transparent: color-mix(in srgb, var(--black), transparent);
	--white: rgba(255, 255, 255, 1);
	--white-transparent: color-mix(in srgb, var(--white), transparent);
	--gray: rgba(199, 202, 212, 1);
	--gray-transparent: color-mix(in srgb, var(--gray), transparent);
	--gray-dark: color-mix(in srgb, var(--gray), var(--black) 40%);
	--cyan: rgba(26, 204, 253, 1);
	--indigo: rgba(80, 102, 255, 1);
	--indigo-transparent: color-mix(in srgb, var(--indigo), transparent);
	--indigo-dark: color-mix(in srgb, var(--indigo), var(--black));
	--orange: rgba(250, 118, 9, 1);
	--orange-dark: color-mix(in srgb, var(--orange), var(--black));
	--pink: rgba(252, 115, 204, 1);
	--purple: rgba(125, 62, 252, 1);
	--red: rgba(248, 0, 163, 1);
	--red-transparent: color-mix(in srgb, var(--red), transparent);
	--yellow: rgba(254, 199, 9, 1);
}

::selection {
	color: var(--black);
	background: var(--pink);
}

body {
	background-color: var(--yellow);
	color: var(--black);
	font-size: 16px;
	font-weight: 500;
	font-family: 'Rubik', sans-serif;
	margin: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

main {
	display: flex;
	flex-direction: column;
	text-align: center;
	min-height: 100%;
}

main > div[inert] {
	display: none;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--black);
		color: var(--red);
	}
}

@media screen and (max-width: 768px), screen and (max-height: 884px) {
	body {
		justify-content: start;
	}

	main > div {
		animation: none !important;
		animation-delay: 0s !important;
		animation-duration: 0s !important;
	}

	nav li[inert] {
		display: none !important;
	}
}