html {
  font-size: 62.5%;
}

@media screen and (max-width: 991.98px) {
	html {
		font-size: 59%;
	}
}

@media screen and (max-width: 767.98px) {
	html {
		font-size: 56%;
	}
}

@media screen and (max-width: 575.98px) {
	html {
		font-size: 52%;
	}
}

:root {
	/* ==========================================================================
	Colors
	========================================================================== */
	--color-1: #F5AC14;
	--color-1_hover: #FFBA0A;
	
	--color-2: #F6BE3B;
	--color-2_hover: #F4Bc32;

	/* ==========================================================================
	Font colors
	========================================================================== */
	--font-color-1: #24272D;
	--font-color-2: #5F6777;
	--font-color-3: #A4AAB6;

	/* ==========================================================================
	Background colors
	========================================================================== */
	--bg-1: #F9FAFA;
	--bg-1-border: #EEF1F1;
	--bg-2: #E8EAED;
	--bg-2-border: #EEF1F1;
	
	--bg-1-dark: #131316;
	--bg-2-dark: #1C1C21;

	/* ==========================================================================
	Shades of white
	========================================================================== */
	--white-1: #ffffff;
	--white-2: #CECED4;
	--white-3: #95959D;
	
	--white-4: #cccccc;
	--white-5: #bbbbbb;
	--white-6: #aaaaaa;

	/* ==========================================================================
	Shades of black
	========================================================================== */
	--black-1: #000000;
	--black-2: #111111;
	--black-3: #222222;
	--black-4: #333333;
	--black-5: #444444;
	--black-6: #555555;
	--black-7: #666666;
	--black-8: #777777;

	/* ==========================================================================
	Activity colors
	========================================================================== */
	--alert-success: #155724;
	--alert-success-bg: #d4edda;
	--alert-success-border: #c3e6cb;

	--alert-warning: #856404;
	--alert-warning-bg: #fff3cd;
	--alert-warning-border: #ffeeba;

	--alert-danger: #721c24;
	--alert-danger-bg: #f8d7da;
	--alert-danger-border: #f5c6cb;

	/* ==========================================================================
	Radius
	========================================================================== */
	--radius-1: 0.2rem;
	--radius-2: 0.4rem;
	--radius-3: .8rem;
	--radius-4: 1.6rem;
	--radius-5: 3.2rem;
	--radius-6: 4rem;
	--radius-7: 8rem;
	--radius-8: 16rem;
	--radius-full: 9999px;
}

@media (max-width: 992px) {
	:root {
		--radius-8: 12rem;
		--radius-7: 6rem;
		--radius-6: 3.6rem;
	}
}

@media (max-width: 768px) {
	:root {
		--radius-4: 1.4rem;
		--radius-5: 2.4rem;
		--radius-6: 3.2rem;
		--radius-7: 6rem;
		--radius-8: 8rem;
	}
}

@media (max-width: 576px) {
	:root {
		--radius-2: 0.3rem;
		--radius-3: .6rem;
		--radius-4: 1rem;
		--radius-5: 2rem;
		--radius-6: 2.6rem;
		--radius-7: 4.2rem;
		--radius-8: 6rem;
	}
}