:root {
	--color1: hsl(244, 75%, 65%);
	--color1Light: hsl(244, 75%, 70%);
	--color1Alpha: hsla(244, 75%, 65%, 0.5);
	--color2: hsl(114, 70%, 52%);
	--color2Light: hsl(114, 70%, 62%);
	--color3: hsl(350, 95%, 50%);
	--color3Light: hsl(350, 85%, 60%);
	
	--step: hsl(244, 40%, 80%);
	
	--selection: hsla(244, 100%, 75%, 0.3);
	
	--focusBorder: var(--color1);
	--focusBackground: hsla(195, 70%, 58%, 0.1);
	--focusBackgroundAlert: hsl(244, 95%, 92%);
	
	--focusAlertBorder: var(--color3);
	--focusAlertBackground: hsl(350, 100%, 96%);
	
	--darkColor: hsl(244, 20%, 15%);
	--darkColorAlpha: hsla(244, 20%, 15%, 0.75);
	--textColor: hsl(244, 20%, 15%);
	--background: hsl(210, 20%, 96%);
	--launcherIcon: hsl(210, 80%, 98%);
	--itemBorder: rgba(0,0,0,0.1);
	--footer: var(--darkColor);
}
@font-face {
	font-family: 'Inter';
	font-weight: 100 900;
	font-style: normal;
	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
	src: url("/font/inter/InterVariable.woff2?v=4.0") format("woff2");
}
html {
	margin: 0;
	padding: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--textColor);
	background-color: var(--background);
}
body {
	margin: 0;
	padding: 0;
}
a {
	color: var(--color1);
}
p {
	margin: 1.5em 0;
}
h1 {
	font-weight: 600;
	font-size: 2em;
	line-height: 1em;
	margin: 1em 0 1.5rem 0;
	letter-spacing: -0.01em;
}
h2 {
	font-weight: 600;
	font-size: 1.5em;
	line-height: 1em;
	margin: 1em 0 1.5rem 0;
	letter-spacing: -0.01em;
}
.page {
	padding: 1em;
	width: calc(100% - 2em);
	max-width: 600px;
	margin: 1em auto;
}
header {
	text-align: center;
	padding: 1em 0;
	border-bottom: 1px solid var(--itemBorder);
}
main {
	margin: 2em 0;
}
footer {
	padding: 1em 0;
	border-top: 1px solid var(--itemBorder);
	text-align: center;
	font-size: 0.8em;
}
.center {
	text-align: center;
	width: 100%;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.loading {
	display: block;
	margin: 0 auto;
}
img.center {
	display: block;
	margin: 0 auto;
}


.form {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: row;
	margin: 1.5em 0;
}
.form p {
	grid-column: 1/-1;
	margin: 0;
}
.form h1,
.form h2 {
	grid-column: 1/-1;
	margin: 1rem 0 0 0;
}
.form .item {
	grid-column-end: span 2;
	border: 1px solid var(--itemBorder);
	background-color: white;
	border-radius: 0.75em;
	box-sizing: border-box;
	padding: 0.5em 0.75em;
}
.form .item.small {
	grid-column-end: span 1;
}
.form .item.focus {
	outline: 1px solid var(--focusAlertBorder);
	border-color: var(--focusAlertBorder);
	background-color: var(--focusAlertBackground);
}
.form .item .label {
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.5em;
}
.form .item input {
	font-family: inherit;
	color: inherit;
	font-size: 1.2em;
	line-height: 2em;
	padding: 0;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	outline: none;
}
.form .item select {
	apperance: none;
	-webkit-appearance: none;
	font-family: inherit;
	color: inherit;
	font-size: 1.2em;
	line-height: 2em;
	padding: 0 16px 0 0;
	border: none;
	background-color: unset;
	background-image: url(img/select.svg);
	background-size: 16px 20px;
	background-position: right center;
	background-repeat: no-repeat;
	width: 100%;
	outline: none;
}
.form .item:focus-within {
	outline: 1px solid var(--color1);
	border-color: var(--color1);
}


.button {
	display: inline-block;
	background-color: var(--color1);
	margin: 0.5em 0.5em 0.5em 0;
	color: white;
	text-align: center;
	font-weight: 600;
	padding: 0.5em 1.5em;
	border-radius: 0.5em;
	cursor: pointer;	
}
.button.check {
	padding: 0.5em 1.5em 0.5em 0.5em;
	background-color: var(--darkColorAlpha);
}
.button.check::before {
	content: "◯\00a0\00a0";
}
.button.active {
	background-color: var(--color2);
}
.button.check.active::before {
	content: "\00a0\00a0";
}

img.icon {
	border-radius: 20%;
	display: block;
	margin: 2em auto;
	width: 6em;
}

.steps {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 400px;
	margin: 1em auto;
	background-image: url(img/steps.svg);
	background-repeat: repeat-x;
}
.steps > * {
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
	border-radius: 50%;
	background-color: var(--step);
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}
.steps .done {
	background-color: var(--darkColor);
	color: white;
	border: 2px solid var(--background);
}
.steps .active {
	/*background-color: var(--color1);*/
	background-image: url(img/step.webp);
	background-size: cover;
	font-size: 1.25em;
	color: white;
	border: 3px solid var(--background);
}

@media (max-width: 600px) {
	.form {
		grid-template-columns: 1fr;
	}
	.form .item {
		grid-column-end: span 1;
	}
}