:root {
	--u1-color-opacity: 1;
	--u1-palette-blue: hsl(214, 65%, 50%);
	--u1-palette-green: green;
	--u1-palette-green-dark: hsl(110.1, 68.2%, 16.9%);
	--u1-palette-vanilla: hsl(41.6, 81.6%, 55.3%);
	--u1-palette-orange: hsl(29.6, 68.6%, 53.7%);
	--u1-palette-yellow: hsl(57.2, 100%, 50%);
	--u1-palette-red: hsl(0, 83%, 41.6%);
	--u1-palette-red-dark: hsl(0, 88.8%, 31.6%);
	--u1-palette-gray: hsl(214.3, 9.1%, 30.2%);
	--u1-palette-gray-light: hsl(0, 0%, 94.9%);

	--u1-color-green: 120, 100%, 25.1%;
	--u1-color-red: 0, 83%, 41.6%;
	--u1-color-orange: 29.6, 68.6%, 53.7%;
	--u1-color-blue: 214, 65%, 50%;
}

.u1-color-black {
	color: hsla(0, 0%, 0%, var(--u1-color-opacity));
}
.u1-color-white {
	color: hsla(0, 0%, 100%, var(--u1-color-opacity));
}
.u1-color-blue {
	color: hsla(var(--u1-color-blue), var(--u1-color-opacity));
}
.u1-color-green {
	color: hsla(var(--u1-color-green), var(--u1-color-opacity));
}
.u1-color-green-dark {
	color: hsla(110.1, 68.2%, 16.9%, var(--u1-color-opacity));
}
.u1-color-vanilla {
	color: hsla(41.6, 81.6%, 55.3%, var(--u1-color-opacity));
}
.u1-color-orange {
	color: hsla(29.6, 68.6%, 53.7%, var(--u1-color-opacity));
}
.u1-color-yellow {
	color: hsla(57.2, 100%, 50%, var(--u1-color-opacity));
}
.u1-color-red {
	color: hsla(0, 83%, 41.6%, var(--u1-color-opacity));
}
.u1-color-red-dark {
	color: hsla(0, 88.8%, 31.6%, var(--u1-color-opacity));
}
.u1-color-gray {
	color: hsla(214.3, 9.1%, 30.2%, var(--u1-color-opacity));
}
.u1-color-gray-light {
	color: hsla(0, 0%, 94.9%, var(--u1-color-opacity));
}

html {
	overflow: auto;
	line-height: 1.5;
	font-size: 62.5%; /*Enables use of rem values like 1.6rem = 16px */
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

body {
	padding: 0;
	margin: 0;
	font-size: 1.6rem; /* =16px */
	line-height: 1.5;
	font-weight: 400;
	font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
		"Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

img {
	max-width: 100%;
}