@font-face {
	font-family: 'Gilroy';
	src: url('../fonts/gilroyoffice-light.woff2') format('woff2');
}
@font-face {
	font-family: 'GilroyHeavy';
	src: url('../fonts/gilroyoffice-bold.woff2') format('woff2');
}
:root {
	--var-orange: 216, 88, 0;
	--var-sand: 245, 243, 239;
	--var-dark-green: 32, 65, 49;
	--var-color-inProgress: 32, 65, 49;

	--var-light-green: 104, 161, 124;
	--var-color-completed: 104, 161, 124;

	--var-dreamm-green: 139, 182, 164;
	--var-color-locked: 139, 182, 164;

	--var-yellow: 234, 170, 0;
	--var-purple: 104, 54, 100;
	--var-blue: 0, 110, 150;

	--var-activity-item-size: 250px;
	--var-activity-item-column-gap: 20px;
	--var-activity-item-row-gap: 30px;
}

html,
body {
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: rgba(var(--var-sand), 1);
	width: 100%;
	height: 100%;
}
body {
	margin: 0 auto;
	max-width: 100vw;
	overflow-x: hidden;
}
body > div {
	height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'GilroyHeavy';
	color: rgba(var(--var-dark-green), 1);
	text-align: left;
}