:root {

	--font-default-family: "SharpGrotesk", sans-serif;
	--font-default-weight: 400;
	--font-default-weight-bold: 700;
	--font-default-size: 18px;
	--font-default-line-height: 1.5;
	--font-default-italic: normal;

	--color-white: #fff;
	--color-black: #000;
	--color-grey: #ccc;

	--color-red: #c00;

	--color-text: var(--color-black);
	--color-background: var(--color-white);

	--content-max-width: 900px;
	--content-min-width: 380px;

	--spacing: 40px;
	--spacing-double: 80px;
	--spacing-tripple: 120px;
	--spacing-quadruple: 160px;

	--footer-height: 123px;

}

@media ( max-width: 840px ) {

	:root {
		--footer-height: auto;
	}

}

@media ( max-width: 640px ) {

	:root {

		--spacing: 20px;
		--spacing-double: 40px;
		--spacing-tripple: 60px;
		--spacing-quadruple: 80px;
		--font-default-size: 16px;

	}

}