/*
* === FLUID FONTS ===
*/
:root {
	--fluid-min-width: 480;
	--fluid-max-width: 1120;
	--fluid-min-size: 12;
	--fluid-max-size: 16;
	--fluid-min-ratio: 1.25;
	--fluid-max-ratio: 1.33;
	--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: 1120px) {
	: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-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-min-scale-6: var(--fluid-min-scale-5) * var(--fluid-min-ratio);
	--fluid-max-scale-6: var(--fluid-max-scale-5) * var(--fluid-max-ratio);
	--fluid-min-size-6: (var(--fluid-min-size) * var(--fluid-min-scale-5)) / 16;
	--fluid-max-size-6: (var(--fluid-max-size) * var(--fluid-max-scale-5)) / 16;
	--step-6: calc(((var(--fluid-min-size-6) * 1rem) + (var(--fluid-max-size-6) - var(--fluid-min-size-6)) * var(--fluid-bp)));
}
/*
* === FLUID SIZES ===
*/
:root {
	--rem-val: 16;
}
/* Group 0: 480px - 1120px */
:root {
	--body-size-1: 25px;
	--body-size-2: 24px;
	--body-size-3: 15px;
	--footer-copyright: 8px;
	--home-serv-subtext: 10px;
	--services-page-sub-heading: 15px;
	--serv-page-subtext: 15px;
	--home-hero-text: 12px;
	--services-page-sub-text: 10px;
	--case-study-title: 25px;
}
@media screen and (min-width: 480px) {
	:root {
		--body-size-1: calc(25px + ((100vw - 480px) / (1120 - 480)) * (45 - 25) );
		--body-size-2: calc(24px + ((100vw - 480px) / (1120 - 480)) * (32 - 24) );
		--body-size-3: calc(15px + ((100vw - 480px) / (1120 - 480)) * (20 - 15) );
		--footer-copyright: calc(8px + ((100vw - 480px) / (1120 - 480)) * (14 - 8) );
		--home-serv-subtext: calc(10px + ((100vw - 480px) / (1120 - 480)) * (18 - 10) );
		--services-page-sub-heading: calc(15px + ((100vw - 480px) / (1120 - 480)) * (20 - 15) );
		--serv-page-subtext: calc(15px + ((100vw - 480px) / (1120 - 480)) * (25 - 15) );
		--home-hero-text: calc(12px + ((100vw - 480px) / (1120 - 480)) * (25 - 12) );
		--services-page-sub-text: calc(10px + ((100vw - 480px) / (1120 - 480)) * (15 - 10) );
		--case-study-title: calc(25px + ((100vw - 480px) / (1120 - 480)) * (35 - 25) );
	}
}
@media screen and (min-width: 1120px) {
	:root {
		--body-size-1: 45px;
		--body-size-2: 32px;
		--body-size-3: 20px;
		--footer-copyright: 14px;
		--home-serv-subtext: 18px;
		--services-page-sub-heading: 20px;
		--serv-page-subtext: 25px;
		--home-hero-text: 25px;
		--services-page-sub-text: 15px;
		--case-study-title: 35px;
	}
}
/*
* === VAR MAPS ===
*/
h1 {
	font-size: var(--body-size-1);
}
h2 {
	font-size: var(--body-size-2);
}
h5 {
	font-size: var(--body-size-3);
}
