h1 {
	text-align: center;
}
form {
	position: absolute;
	top: 20%;
	left: 50%;
	translate: -50%;
	width: clamp(25em, 50vw, 50em);
	padding: 1em 2em 2em;
	display: grid;
	grid-template-columns: 12em auto 40%;
	gap: 1em;
	border-radius: 1.5em;
	background: var(--container-bg);
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	overflow: hidden;
}

label:not([for="remember-input"]), span.label {
	grid-column: 1;
	translate: 0 .4em;
	font-size: 1.1em;
}
input:not([type="checkbox"]), span.value {
	grid-column: 2/4;
	width: 100%;
	height: 2em;
	padding: .5em 1em;
	border: none;
	border-radius: 1em;
	background: var(--darkgray);
	box-shadow: var(--a-box-shadow);
	transition: box-shadow .2s;
}
input:not([type="checkbox"]):is(:focus, :hover) {
	box-shadow: var(--a-box-shadow-focus1);
}
#captcha {
	grid-row: span 2;
	grid-column: span 2;
	overflow: hidden;
}
label[for="remember-input"] {
	line-height: 1.5em;
}
#remember-input {
	width: 1.2em;
	translate: 0 25%;
}
button[type="submit"] {
	margin-left: auto;
	width: fit-content;
	padding: .5em 2em;
	font-weight: 600;
	border: none;
	border-radius: 1em;
	background: var(--a-bg);
	box-shadow: var(--a-box-shadow);
	transition: box-shadow .2s, color .2s, transform .2s;
}
button:is(:hover, :focus) {
	transform: scale(99%);
	color: color-mix(in srgb, currentColor, black 10%);
	box-shadow: var(--a-box-shadow-focus2);
}

#register {
    position: absolute;
    bottom: 1em;
    right: 2em;
}