/* @override 
	http://web.mamp.xyz/maku/css/variables.css?* */

:root {
	/* Max Width */
	--max-width: 600px;
	/* Font Sizes */
	--txt-main-size: 18px;
	--txt-small-size: 16px;
	--h-one-size: 24px;
	--h-two-size: 22px;
	--h-three-size: 21px;
	--h-four-size: 20px;
	--h-five-size: 19px;
	--h-six-size: 18px;
	/* Padding & Spacing*/
	--base: 16px;
	--base-tiny: 8px;
	--base-xtra: 24px;
	/* Border Radius */
	--radius: 8px;
	--radius-tiny: 4px;
	--radius-xtra: 12px;
	/* Tables */
	--table-base-row-height: 36px;
	/* Forms */
	--form-font-size: 14px;
	--form-base-height: 24px;
	--form-base-width: 52px;
	--form-base-radius: 4px;
	/* Backgrounds Colors*/
	--bg-main-color: rgb(46, 46, 56);
	--bg-alt-color: rgb(37, 37, 45);
	--bg-light-color: rgb(41, 41, 50);
	--bg-dark-color: rgb(32, 32, 39);
	/* Headings Colors */
	--heading-main-color: rgb(227, 242, 253);
	--heading-alt-color: rgb(255, 255, 255);
	/* Text Colors */
	--txt-main-color: rgb(203, 203, 203);
	--txt-off-color: rgb(98, 98, 108);
	--txt-alt-color: rgb(0, 176, 255);
	--txt-alt-on-color: rgb(132, 255, 255);
	--txt-alt-off-color: rgb(21, 101, 192);
	/* Alerts Colors */
	--alert-fine-color: rgb(0, 230, 118);
	--alert-caution-color: rgb(255, 196, 0);
	--alert-wrong-color: rgb(255, 23, 68);
}

/* ⬇ 360px and bigger | Phone — Portrait [360] */
@media screen and (min-width: 360px) {
	:root {
		/* Forms */
		--form-font-size: 16px;
	}
}

/* ⬇ 412px and bigger | Phone — Portrait [412] */
@media screen and (min-width: 412px) {
	:root {
		/* Font Sizes */
		--txt-main-size: 20px;
		--txt-small-size: 18px;
		--h-one-size: 26px;
		--h-two-size: 24px;
		--h-three-size: 23px;
		--h-four-size: 22px;
		--h-five-size: 21px;
		--h-six-size: 20px;
		/* Padding & Spacing*/
		--base: 24px;
		--base-tiny: 12px;
		--base-xtra: 32px;
	}
}