body
{
	box-sizing: border-box;
	font-family: system-ui;
	background-color: dodgerblue;
	padding: 0;
	margin: 0;
}
body * {
	box-sizing: border-box;
}

main {
	height: 100vh;
	height: 100dvh;

	width: 90%;
	margin-inline: auto;

	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas: "login-form login-section";
	grid-column-gap: 5%;
	align-items: center;
}
main > * {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

form {
	background-color: white;
	padding: 4%;
	border-radius: 3px;
	grid-area: login-form;
}

form img,
form h3 {
	display: block;
	margin-inline: auto;
	text-align: center;
	margin-block: 5%;
	color: rgb(51 51 51);
	letter-spacing: 1px;
}
form label {
	color: rgb(1 64 159);
	display: block;
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 2%;

	font-weight: bold;
	letter-spacing: 1px;
}
form input,
form button {
	display: block;
	width: 100%;

	border: none;
	border-radius: 3px;

	outline: 1px solid rgb(1 64 159);
	font-size: 1.2rem;
	padding: 3%;
	margin-bottom: 2%;
}
form input {
	transition: outline-color .5s;
	color: rgb(51 51 51);
	letter-spacing: 1px;
}
form:not(.sending) input:focus,
form:not(.sending) input:active {
	outline-color: dodgerblue;
}

form button {
	outline-width: 2px;
	color: rgb(1 64 159);
	background-color: white;
	cursor: pointer;

	margin-top: 6%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3%;

	box-shadow: 0 8px 8px 0 rgba(0,0,0,0.15), 0 6px 10px 0 rgba(0,0,0,0.15);
	transition: box-shadow .4s, color .5s, backgroud-color .5s;
}
form:not(.sending) button:hover {
	color: white;
	background-color: rgb(1 64 159);
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

section {
	grid-area: login-section;
	background-color: white;
	position: relative;
	overflow: hidden;
	border-radius: 3px;
	padding: 2%;
}
section * {
	letter-spacing: 1px;
}
section svg.bg {
	overflow: hidden;
	transform: scale(1.5);
	width: 100%;
	height: 90%;

	opacity: .06;
	position: absolute;
	left: 0;
	top: 2%;
}

section h4 {
	width: 100%;
	font-size: 1.2rem;
	color: rgb(1 64 159);
	padding-block: 2%;
	margin-block: 0;
	border-bottom: 1px solid lightgray;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
section h4 svg {
	width: 1.2rem;
	height: 1.2rem;
}
section h4 path {
	fill: rgb(1 64 159);
} 


section li {
	font-weight: 600;
	list-style-image: url('/images/chevron_right.svg');
}


form svg {
	width: 1rem;
	height: 1rem;
}

form svg path {
	fill: rgb(1 64 159);
}


form button path {
	transition: fill .5s;
}
form:not(.sending) button:hover path {
	fill: white;
}

form.sending * {
	cursor: not-allowed;
}

form:not(.sending) .sending-icon,
form.sending .submit-icon {
	display: none;
}


form:not(.sending)[error]::after {
	content: attr(error);

	color: rgb(200 0 0);
	font-weight: bold;
	font-size: .7rem;
	letter-spacing: 1px;
}

form:not(.sending) input.invalid,
form:not(.sending) input.invalid:focus,
form:not(.sending) input.invalid:active {
	outline-color: rgb(200 0 0);
}