:root {
	--desktop: 712px;
	--mobile: 480px;

	/* hex 1CD99F */
	--primary-50: oklch(0.97 0.02 176);
	--primary-100: oklch(0.93 0.06 174);
	--primary-200: oklch(0.90 0.10 172);
	--primary-300: oklch(0.86 0.12 171);
	--primary-400: oklch(0.83 0.15 169);
	--primary-500: oklch(0.79 0.16 165);
	--primary-600: oklch(0.70 0.14 166);
	--primary-700: oklch(0.58 0.12 166);
	--primary-800: oklch(0.46 0.09 167);
	--primary-900: oklch(0.33 0.06 168);
	--primary-950: oklch(0.18 0.03 172);

	--green-50: oklch(0.97 0.03 145);
	--green-100: oklch(0.92 0.09 145);
	--green-200: oklch(0.88 0.15 144);
	--green-300: oklch(0.84 0.20 144);
	--green-400: oklch(0.81 0.24 143);
	--green-500: oklch(0.77 0.25 143);
	--green-600: oklch(0.68 0.22 143);
	--green-700: oklch(0.57 0.19 143);
	--green-800: oklch(0.45 0.15 143);
	--green-900: oklch(0.32 0.10 143);
	--green-950: oklch(0.18 0.05 143);

	--red-50: oklch(0.95 0.02 7);
	--red-100: oklch(0.86 0.06 9);
	--red-200: oklch(0.77 0.11 10);
	--red-300: oklch(0.69 0.15 13);
	--red-400: oklch(0.63 0.20 16);
	--red-500: oklch(0.57 0.22 22);
	--red-600: oklch(0.51 0.19 21);
	--red-700: oklch(0.42 0.16 21);
	--red-800: oklch(0.34 0.12 20);
	--red-900: oklch(0.24 0.08 18);
	--red-950: oklch(0.14 0.04 11);

	--orange-50: oklch(0.98 0.02 87);
	--orange-100: oklch(0.94 0.06 88);
	--orange-200: oklch(0.90 0.10 88);
	--orange-300: oklch(0.87 0.13 88);
	--orange-400: oklch(0.83 0.16 85);
	--orange-500: oklch(0.80 0.16 81);
	--orange-600: oklch(0.69 0.14 82);
	--orange-700: oklch(0.58 0.12 82);
	--orange-800: oklch(0.46 0.09 83);
	--orange-900: oklch(0.33 0.06 86);
	--orange-950: oklch(0.18 0.04 93);

	--blue-50: oklch(0.95 0.02 270);
	--blue-100: oklch(0.85 0.07 269);
	--blue-200: oklch(0.76 0.12 267);
	--blue-300: oklch(0.66 0.17 266);
	--blue-400: oklch(0.56 0.22 264);
	--blue-500: oklch(0.51 0.25 264);
	--blue-600: oklch(0.44 0.22 264);
	--blue-700: oklch(0.37 0.18 264);
	--blue-800: oklch(0.30 0.14 263);
	--blue-900: oklch(0.22 0.09 263);
	--blue-950: oklch(0.14 0.04 256);

	--grey-50: oklch(0.96 0.00 197);
	--grey-100: oklch(0.89 0.00 174);
	--grey-200: oklch(0.83 0.01 183);
	--grey-300: oklch(0.75 0.01 177);
	--grey-400: oklch(0.68 0.01 181);
	--grey-500: oklch(0.60 0.01 181);
	--grey-600: oklch(0.53 0.01 181);
	--grey-700: oklch(0.44 0.01 177);
	--grey-800: oklch(0.35 0.01 183);
	--grey-900: oklch(0.26 0.00 197);
	--grey-950: oklch(0.16 0.00 197);
}

body {
	background: var(--grey-50);
	font-family: 'Iosevka', sans-serif;
	color: var(--primary-950);
}

main.centered {
	display: flex;
	flex-direction: column;
	margin: auto;
	padding: 5px;

	@media (max-width: 418px) {
		width: 100%;
	}

	@media (min-width: 1024px) {
		width: 30%;
	}
}

form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

label {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-weight: bold;
}

input,
textarea,
select {
	padding: 0.5rem;
	border: 1px solid var(--primary-800);
	border-radius: 4px;

	&:focus {
		border: 1px solid var(--primary-500);
		outline: 1px solid var(--primary-500);
	}
}

button,
input[type=submit] {
	border-color: var(--primary-800);
	background-color: var(--primary-500);
}

.error {
	color: var(--red-500);
	font-weight: bold;
}