/* Typo  */
@font-face {
	font-family: 'Anton SC';
	src: url('./anton-sc-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0000-00FF; /* Latin character set */
} 

/* Reset  */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Base */
:root {
	color-scheme: light dark;
	--color-text-primary: #171406;
	--color-bg-primary: #fff;
	--size-step-11: clamp(3.78875rem, 1.35rem + 11.84vw, 10.448125rem);
	--leading-micro: 0.85;
	--leading-standard: 1.4;
	--font-normal: 400;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-text-primary: #fff;
		--color-bg-primary: #000000;
	}
}

html, body {
	min-height: 100svh;
	overflow: clip;
}

body {
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-family: 'Anton SC', sans-serif;
	font-size-adjust: from-font;
	color: var(--color-text-primary);
	background: var(--color-bg-primary);
}

header {
	width: 100%;
	flex: 0 1 min-content;
	transform: translateY(45%)
}

h1 {
	line-height: var(--leading-micro);
	text-transform: lowercase;
}

svg {
	width: 100%;
	height: auto;
}

svg :where(text) {
	fill: var(--color-text-primary);
}

/* Utils */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}