:root {
	--ff-main: 'Roboto Flex', sans-serif;
	--ff-accent: 'Roboto Flex', sans-serif;

	--fw-light: 100;
	--fw-regular: 300;
	--fw-semi-bold: 400;
	--fw-bold: 700;

	--fs-100: 0.625rem;
	--fs-200: 0.750rem;
	--fs-300: 0.875rem;
	--fs-400: 1.000rem;
	--fs-500: 1.125rem;
	--fs-600: 1.375rem;
	--fs-700: 1.750rem;
	--fs-800: 2.000rem;
	--fs-900: 2.500rem;
}
@media (prefers-color-scheme: dark) {
	:root {
	}
}
html {
	color-scheme: dark; /* dark light / light dark / dark / light */
	scroll-behavior: smooth;
	scroll-padding-top: 3rem;
	width: 100vw;
	width: 100svw;
	height: 100vh;
	height: 100svh;
	max-height: 100vh;
	max-height: 100svh;

	overflow: hidden;
	overflow-y: scroll;
}
html, body {
	scrollbar-gutter: stable;
	touch-action: auto; /* none pan-y pinch-zoom - https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action?retiredLocale=de */
}
* {
	font-family: inherit;
}
body {
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;

	font-family: var(--ff-main);
	font-weight: var(--fw-regular);
	font-size: var(--fs-300);
	line-height: 1.7;

	background-color: #333;
	color: #ddd;
}
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}
input, select, textarea, button {
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
	text-wrap: balance;
}