:root {
	--background: #fafafa;
	--highlight: #c2c2c2;
	--text: #000000;

	--textInvert: #ffffff;
	--highlightInvert: #444444;

	--audioBackground: #f1f1f1;
	--audioHighlight: #e1e1e1;

	--radius: 2px;

	--hugeText: 100px;
	--bigText: 64px;
	--largeText: 32px;
	--standardText: 24px;
	--smallText: 16px;
	--tinyText: 14px;
}

html {
	box-sizing: border-box;
	font-weight: 400;
	font-size: var(--smallText);
	padding: 0;
	margin: 0;
	background-color: var(--background);
	scrollbar-width: thin;
	scrollbar-color: var(--highlight) var(--background);
	background-color: #000;
	font-family: "DM Sans", sans-serif;
	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

*,:before,:after {
	box-sizing: inherit;
	font-weight: inherit;
}

body {
	color: var(--text);
	background-color: var(--background);
	overflow-x: hidden;
}

::-moz-selection {
	color: var(--background);
	background: var(--text);
}

::selection {
	color: var(--background);
	background: var(--text);
}

::-webkit-scrollbar {
	background-color: var(--background);
}

::-webkit-scrollbar-thumb {
	background-color: var(--highlight);
}