:root {

	/* colors */
	--accent-0103: #fbfbff;
	--accent-0105: #f8f8ff;
	--accent-0110: #f3f3ff;
	--accent-0120: #e9e9f9;
	--accent-0400: #686efd;
	--accent-0500: #575af6;
	--accent-0700: #3743dc;

	--danger-0110: #fff0f1;
	--danger-0120: #fee4e5;
	--danger-0500: #de0e22;
	--danger-0600: #c7072c;

	--neutral-0100: #ffffff;
	--neutral-0105: #f8f9fa;
	--neutral-0110: #f1f4f6;
	--neutral-0120: #e7eaec;
	--neutral-0200: #b0b8c1;
	--neutral-0300: #8e969d;
	--neutral-0450: #707784;
	--neutral-0600: #5d6373;
	--neutral-0700: #535968;
	--neutral-0900: #454953;
	--neutral-1250: #33333c;

	--success-0110: #e4f8eb;
	--success-0500: #0f812a;
	--success-0600: #07732a;

	/* font-weights */
	--fw-100: 100;
	--fw-150: 150;
	--fw-200: 200;
	--fw-250: 250;
	--fw-300: 300;
	--fw-350: 350;
	--fw-400: 400;
	--fw-450: 450;
	--fw-500: 500;
	--fw-550: 550;
	--fw-600: 550;
	--fw-650: 650;
	--fw-700: 700;
	--fw-750: 750;
	--fw-800: 800;
	--fw-850: 850;
	--fw-900: 900;
}

html,
body {
	scrollbar-gutter: stable;
}
body {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;

	font-family: 'Onest', sans-serif;
	font-weight: var(--fw-400);
	font-size: 15px;
	line-height: 24px;
	color: var(--neutral-0800);
}

main {
	flex-grow: 1;
}

@media (min-width: 1140px) {

	/* scrollbar */
	::-webkit-scrollbar {
		width: 14px;
	}
	::-webkit-scrollbar-track {
		margin-inline: 5px;
		background: var(--bg-color, #ffffff);
		box-shadow: inset 1px 0 0 var(--neutral-0120);
	}
	::-webkit-scrollbar-thumb {
		border: 4px solid transparent;
		background-color: var(--neutral-0120);
		background-clip: padding-box;
		border-radius: 100px;
	}
}