*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--slate-50: #f8fafc;
	--slate-100: #f1f5f9;
	--slate-200: #e2e8f0;
	--slate-300: #cbd5e1;
	--slate-350: #5b779f;
	--slate-400: #94a3b8;
	--slate-500: #64748b;
	--slate-600: #475569;
	--slate-700: #334155;
	--slate-800: #1e293b;
	--slate-900: #0f172a;
	--green-500: #178740;
	--red-500: #eb1414;
	--orange-500: #f97316;
	--orange-600: #ea580c;
	--orange-700: #c2410c;
	--blue-600: #2563eb;
	--neutral-500: #a3a3a3;
	--neutral-600: #757575;
}

html {
	overflow-y: scroll;
}

body,
input,
select,
label {
	font-family: Nunito, sans-serif;
	color: var(--slate-700);
	font-size: 1rem;
}

button {
	font-size: 1rem;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

code {
	background-color: var(--slate-200);
	padding: 0.1em 0.25em;
	border-radius: 0.1em;
	color: var(--slate-700);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

@media screen and (forced-colors: active) {
	code {
		border: 1px solid ButtonText;
	}
}
