:root {
	--font-stack: "Inter", sans-serif;
	--bold: 600;
	--regular: 400;
	--title: 21px;
	--title-height: 1.2;
	--text: 16px;
	--text-height: 1.4;
	--text-small: 14px;
	--text-mini: 11px;
	--app-margin: 48px;
	--app-margin-small: 24px;
	--app-margin-mini: 16px;
	--white: #ffffff;
	--light-gray-blue: #f5f9fd;
	--gray-1: #f6f6f6;
	--gray-2: #e1e1e1;
	--gray-3: #b6bcc1;
	--green-accent: #3fdb9c;
	--green-200: #63e3bd;
	--green-500: #26b99a;
	--green-900: #0a4533;
	--blue-accent: #3495f5;
	--blue-200: #8fd2e8;
	--blue-500: #3b73ab;
	--blue-800: #2c3e50;
	--blue-900: #283744;
	--text-color: #566571;
	--alert: #f15151;
	--alert-hover: #f86b6b;
	--color: var(--text-color);
	--color-hover: var(--blue-800);
	--color: var(--blue-800);
	--color-hover: var(--blue-900);
	--color-2: var(--gray-3);
	--bg: var(--white);
	--bg-hover: var(--gray-1);
	--bg-50: #ffffff80;
	--bg-2: var(--gray-1);
	--bg-2-hover: var(--white);
	--border-color: var(--gray-2);
}

html,
body {
	font-family: sans-serif;
	line-height: 1.6;
	color: var(--color);
}

body {
	margin: 1rem;
}

main > * {
	max-width: 80ch;
}

pre,
code {
	font-size: 1rem;
	background-color: #eee;
	display: inline-block;
}

code {
	padding: 0 0.5em;
}

pre {
	padding: 1em;
}