@layer base {
	@font-face {
		font-family: 'Geist';
		src: url(/fonts/GeistVariableVF.woff2) format('woff2');
	}

	@font-face {
		font-family: 'Geist Mono';
		src: url(/fonts/GeistMonoVariableVF.woff2) format('woff2');
	}
}


:root {
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 20px;
	--space-5: 32px;
	--space-6: 52px;
	--space-7: 84px;
	--space-8: 136px;
	--space-9: 220px;

	--font-family-sans: 'Geist';
	--font-family-serif: PT Serif;
	--font-family-mono: 'Geist Mono';

	--font-size-0: 12px;
	--font-size-1: 14px;
	--font-size-2: 16px;
	--font-size-3: 18px;
	--font-size-4: 20px;
	--font-size-5: 24px;
	--font-size-6: 30px;
	--font-size-7: 36px;
	--font-size-8: 48px;
	--font-size-9: 60px;
	--font-size-10: 72px;

	--line-height-0: 16px;
	--line-height-1: 20px;
	--line-height-2: 24px;
	--line-height-3: 28px;
	--line-height-4: 28px;
	--line-height-5: 32px;
	--line-height-6: 36px;
	--line-height-7: 40px;
	--line-height-8: 48px;
	--line-height-9: 60px;
	--line-height-10: 72px;
	--line-height-11: 96px;
	--line-height-12: 128px;

	--white: #fafafa;
	--black: #0a0a0a;
	--gray-200: #ced2d9;
	--gray-600: #9b9b9b;
	--blue-600: #1e61cd;
	--magenta-100: #f9d7eb;

	--max-width-0: 320px;
	--max-width-1: 768px;
}

html {
	background-color: var(--black);
	color: var(--white);
	font-family: var(--font-family-sans), var(--font-family-serif), sans-serif;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--black);
	color: var(--white);
}

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

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}