/*
* === FLUID FONTS ===
*/
:root {
	--fluid-min-width: 480;
	--fluid-max-width: 947;
	--fluid-min-size: 14;
	--fluid-max-size: 18;
	--fluid-min-ratio: 1.333;
	--fluid-max-ratio: 1.414;
	--fluid-screen: 100vw;
	--fluid-bp: calc((var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) / ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16)));
}
@media screen and (max-width: 480px) {
	:root {
		--fluid-screen: calc(var(--fluid-min-width) * 1px);
	}
}
@media screen and (min-width: 947px) {
	:root {
		--fluid-screen: calc(var(--fluid-max-width) * 1px);
	}
}
:root {
	--fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
	--fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));

	--fluid-min-scale--1: var(--fluid-min-ratio) * var(--fluid-min-negative);
	--fluid-max-scale--1: var(--fluid-max-ratio) * var(--fluid-max-negative);
	--fluid-min-size--1: (var(--fluid-min-size) * var(--fluid-min-scale--1)) / 16;
	--fluid-max-size--1: (var(--fluid-max-size) * var(--fluid-max-scale--1)) / 16;
	--step--1: calc(((var(--fluid-min-size--1) * 1rem) + (var(--fluid-max-size--1) - var(--fluid-min-size--1)) * var(--fluid-bp)));

	--fluid-min-scale-0: var(--fluid-min-ratio);
	--fluid-max-scale-0: var(--fluid-max-ratio);
	--fluid-min-size-0: (var(--fluid-min-size)) / 16;
	--fluid-max-size-0: (var(--fluid-max-size)) / 16;
	--step-0: calc(((var(--fluid-min-size-0) * 1rem) + (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)));

	--fluid-min-scale-1: var(--fluid-min-scale-0) * var(--fluid-min-ratio);
	--fluid-max-scale-1: var(--fluid-max-scale-0) * var(--fluid-max-ratio);
	--fluid-min-size-1: (var(--fluid-min-size) * var(--fluid-min-scale-0)) / 16;
	--fluid-max-size-1: (var(--fluid-max-size) * var(--fluid-max-scale-0)) / 16;
	--step-1: calc(((var(--fluid-min-size-1) * 1rem) + (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)));

	--fluid-min-scale-2: var(--fluid-min-scale-1) * var(--fluid-min-ratio);
	--fluid-max-scale-2: var(--fluid-max-scale-1) * var(--fluid-max-ratio);
	--fluid-min-size-2: (var(--fluid-min-size) * var(--fluid-min-scale-1)) / 16;
	--fluid-max-size-2: (var(--fluid-max-size) * var(--fluid-max-scale-1)) / 16;
	--step-2: calc(((var(--fluid-min-size-2) * 1rem) + (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)));

	--fluid-min-scale-3: var(--fluid-min-scale-2) * var(--fluid-min-ratio);
	--fluid-max-scale-3: var(--fluid-max-scale-2) * var(--fluid-max-ratio);
	--fluid-min-size-3: (var(--fluid-min-size) * var(--fluid-min-scale-2)) / 16;
	--fluid-max-size-3: (var(--fluid-max-size) * var(--fluid-max-scale-2)) / 16;
	--step-3: calc(((var(--fluid-min-size-3) * 1rem) + (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)));

	--fluid-min-scale-4: var(--fluid-min-scale-3) * var(--fluid-min-ratio);
	--fluid-max-scale-4: var(--fluid-max-scale-3) * var(--fluid-max-ratio);
	--fluid-min-size-4: (var(--fluid-min-size) * var(--fluid-min-scale-3)) / 16;
	--fluid-max-size-4: (var(--fluid-max-size) * var(--fluid-max-scale-3)) / 16;
	--step-4: calc(((var(--fluid-min-size-4) * 1rem) + (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)));

	--fluid-min-scale-5: var(--fluid-min-scale-4) * var(--fluid-min-ratio);
	--fluid-max-scale-5: var(--fluid-max-scale-4) * var(--fluid-max-ratio);
	--fluid-min-size-5: (var(--fluid-min-size) * var(--fluid-min-scale-4)) / 16;
	--fluid-max-size-5: (var(--fluid-max-size) * var(--fluid-max-scale-4)) / 16;
	--step-5: calc(((var(--fluid-min-size-5) * 1rem) + (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)));
}
/*
* === FLUID SIZES ===
*/
:root {
	--rem-val: 16;
}
/* Group 0: 480px - 1644px */
:root {
	--red-spacer: 6.25rem;
	--purple-spacer: 5.625rem;
	--orange-spacer: 4.375rem;
	--amber-spacer: 3.125rem;
	--yellow-spacer: 1.75rem;
	--green-spacer: 1.5625rem;
	--grey-spacer: 0.75rem;
	--blue-spacer: 0.5625rem;
	--black-spacer: 0.284rem;
}
@media screen and (min-width: 480px) {
	:root {
		--red-spacer: calc(6.25rem + ((100vw - 480px) / (1644 - 480)) * ((25 - 6.25) * var(--rem-val)));
		--purple-spacer: calc(5.625rem + ((100vw - 480px) / (1644 - 480)) * ((22.5 - 5.625) * var(--rem-val)));
		--orange-spacer: calc(4.375rem + ((100vw - 480px) / (1644 - 480)) * ((17.5 - 4.375) * var(--rem-val)));
		--amber-spacer: calc(3.125rem + ((100vw - 480px) / (1644 - 480)) * ((12.5 - 3.125) * var(--rem-val)));
		--yellow-spacer: calc(1.75rem + ((100vw - 480px) / (1644 - 480)) * ((7 - 1.75) * var(--rem-val)));
		--green-spacer: calc(1.5625rem + ((100vw - 480px) / (1644 - 480)) * ((6.25 - 1.5625) * var(--rem-val)));
		--grey-spacer: calc(0.75rem + ((100vw - 480px) / (1644 - 480)) * ((1.6 - 0.75) * var(--rem-val)));
		--blue-spacer: calc(0.5625rem + ((100vw - 480px) / (1644 - 480)) * ((2.25 - 0.5625) * var(--rem-val)));
		--black-spacer: calc(0.284rem + ((100vw - 480px) / (1644 - 480)) * ((1.136 - 0.284) * var(--rem-val)));
	}
}
@media screen and (min-width: 1644px) {
	:root {
		--red-spacer: 25rem;
		--purple-spacer: 22.5rem;
		--orange-spacer: 17.5rem;
		--amber-spacer: 12.5rem;
		--yellow-spacer: 7rem;
		--green-spacer: 6.25rem;
		--grey-spacer: 1.6rem;
		--blue-spacer: 2.25rem;
		--black-spacer: 1.136rem;
	}
}
/*
* === VAR MAPS ===
*/
body {
	font-size: var(--step-0);
	line-height: 1.5;
}
h1 {
	font-size: var(--step-5);
	line-height: 1.414;
}
h2 {
	font-size: var(--step-4);
	line-height: 1.414;
}
h3 {
	font-size: var(--step-3);
	line-height: 1.414;
}
h4 {
	font-size: var(--step-2);
	line-height: 1.414;
}
h5 {
	font-size: var(--step-1);
	line-height: 1.414;
	letter-spacing:: -1px;
}