body {
	background: url('imgs/login-background.jpg');
	background-position: 90% center;
	background-size: cover;

	grid-template-areas: 'content';
	grid-template-rows: 1fr;
	align-items: center;
	padding-block-end: 2lh;
}
#page-header,
#page-footer {
	display: none;
}
#page-content {
	background: transparent;
}

.login-container {
	--inline-pad: 3ch;
	--block-pad: 1lh;

	display: grid;
	grid-auto-flow: row;
	gap: var(--block-pad) 0;
	max-width: min(100%, calc(var(--input-narrow-max-width) + var(--inline-pad) * 2));
	margin-inline: auto;

	background: var(--blocks-background);
	border-radius: 1em;
	box-shadow: 0 0 .75rem 0 var(--clr-300);


	.login-header {
		padding-inline: var(--inline-pad);
		padding-block: var(--block-pad) calc(var(--block-pad) * .75);
		box-shadow: 0 .3em .3em -.25em rgb(0 0 0 / .125);
	}

	.login-form {
		padding-inline: var(--inline-pad);
		padding-block-end: var(--block-pad);

		display: grid;
		grid-auto-flow: row;
		align-items: center;
		gap: calc(var(--block-pad) / 2) 0;
		min-height: 4lh;

		.container {
			text-align: center;

			&:not(.forgotten){
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				border: var(--ui-border);
				border-radius: var(--ui-border-radius);

				&:is(:focus-within) {
					outline: var(--ui-outline);
					outline-offset: var(--ui-outline-offset);
				}
			}
			&.forgotten {
				color: var(--clr-300);

				&:is(:focus-within) {
					color: var(--color-primary);
					text-decoration: underline;
				}
			}

			.legend {
			}
			.value {
				border: 0;
				padding-inline: 1ch;

				&:is(:focus) {
					outline: 0;
				}
			}
			.command {
				--icon-size: .75em;
				--icon-inline-padding: .75em;
				--icon-block-padding: calc((1lh - 1ch) / 2);

				color: var(--clr-300);
				padding: 0;
				border: 0;
				border-radius: 0;
				border-inline-start: var(--ui-border);

				&.back {
					transform: rotate(180deg);
				}

				&:is(:focus-visible, :focus, :focus-within, :hover) {
					color: var(--clr-700);
					border-color: var(--ui-color-accent);
					outline: 0;
				}
			}
			&:has(.back):has(.value:placeholder-shown){
				.submit {
					display: none;
				}
			}
			&:has(.back):not(:has(.value:placeholder-shown)){
				.back {
					display: none;
				}
			}
		}
	}
}