main {
	width: 30em;
	max-width: 80%;
	margin: 5em auto;

	background-color: var(--surface-1);
	border-radius: var(--border-radius);
	padding: 1em;

	display: none;
}

/* test for CSS nesting support */
body {
	& main {
		display: block;
	}
}

main > section {
	background-color: var(--surface-2);
}

main > section:last-child {
	margin-bottom: 0;
}

.entry-grid > div {
	background-color: var(--surface-3);
}

/* Title animation */
body main {
	& > h1 {
		& > * {
			display: inline-block;
		}
		
		margin-top: 2rem;
		font-size: min(4em, 10vw);
		text-align: center;
		user-select: none;

		& > span {
			margin-bottom: 0.25em;
		}
	}

	& > h2 {
		font-size: min(2em, 5vw);
		margin-top: -2em;
		margin-bottom: 0;
		margin-right: 1.8em;
		text-align: right;
		animation: title-glide-in 500ms 550ms backwards;
	}
}

body:not(.unload) main h1 {
	& > * {
		animation: title-glide-in 500ms backwards ease-out;
	}

	& > :nth-child(1) { animation-delay: 150ms}
	& > :nth-child(2) { animation-delay: 200ms}
	& > :nth-child(3) { animation-delay: 250ms}
	& > :nth-child(4) { animation-delay: 300ms}
	& > :nth-child(5) { animation-delay: 350ms}
	& > :nth-child(6) { animation-delay: 400ms}
}

@keyframes title-glide-in {
	from {
		scale: 0.9;
		translate: 0 -0.25em;
		opacity: 0;
	}

	to {
		scale: 1;
		translate: 0;
		opacity: 1;
	}
}



#verification-placeholder-form {
	grid-template-columns: 1.5em auto;
	align-items: center;
}

#user-code-input {
	width: 10em;
}

#login-button {
	display: block;
	margin: 4em auto;
	padding: 1em 2em;
	font-size: 1em;
}

.entry-grid {
	--entry-grid-columns: 2;
}

@media (max-width: 37.5em) {
	.entry-grid {
		--entry-grid-columns: 1;
	}
}

main > hr {
	margin: 2em 0;
}

main > p {
	font-size: 0.75em;
	text-align: center;
	margin-bottom: 0;
}

/* transitions */
main {
	opacity: 1;
	transition: 250ms opacity, 250ms scale;
}

body.unload main {
	opacity: 0;
	scale: 99%;
}