/* R O O T -------------------------------------------------------------------------------------- */

:root {
	--bg 01: hsl(0 0% 0%);
	--bg 02: hsl(0 0% 5%);
	--bg 03: hsl(0 0% 7%);
	--bg 04: hsl(0 0% 9%);
	--bg 05: hsl(0 0% 10%);
	--bg 06: hsl(0 0% 12%);
	--bg 07: hsl(0 0% 14%);
	--bg 08: hsl(0 0% 15%);
	--bg 09: hsl(0 0% 16%);
	--bg 10: hsl(0 0% 18%);
	--bg 11: hsl(0 0% 20%);
	--bg 12: hsl(0 0% 22%);
	--bg 13: hsl(0 0% 24%);
	--bg 14: hsl(0 0% 26%);
	--bg 15: hsl(0 0% 30%);
	--col 1: hsl(0 0% 100%);
	--col 2: hsl(0 0% 93%);
	--col 3: hsl(0 0% 73%);
	--col 4: hsl(0 0% 93% /.9);
	--col 5: hsl(0 0% 93% /.8);
	--font 1: "Roboto Regular";
	--font 2: "Roboto Medium";
	--font 3: "Roboto Bold";
	--font 4: "JetBrains Mono NL Regular";
	--font 5: "JetBrains Mono NL Semibold";
	--font 6: "JetBrains Mono NL Bold";
	--font 7: "JetBrains Mono Regular";
	--font 8: "SF Compact Text Semibold";
	--grid-row-gap body: 2.25em;
	--height header: 3.5rem;
	--height header button: 2.5rem;
	--height footer: 3.5rem;
	--height bar: 4em;
	--height nav page a: 2.75em;
	--width page: 1280px;
}

/* V I E W P O R T <= 1 2 8 0 p x --------------------------------------------------------------- */

@media only screen and (max-width: 1280px) {

	:root { --width page: 100%; }

}