html {
	height: 100%;
}

#index {
	display: flex;
	align-items: center;
	justify-content: center;
}

#logo {
	background-repeat: repeat-y;
	background-size: 50%;
	background-position: center;
}

#index > main {
	width: min(calc(100vw - 32px), 480px);

	display: flex;
	flex-direction: column;

	> #login-content {
		border: var(--bitter-300) var(--border-width) solid;
		border-top: none;
		padding-inline: 8px;
		padding-block: 16px;

		display: grid;
		gap: 32px;

		position: relative;
	}

	#login-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 16px;
		column-gap: 8px;

		> label {
			color: var(--bitter-600);
			align-self: center;
		}

		> input {
			grid-column: span 2;

			background-color: var(--crimson-50);
			border: var(--bitter-200) var(--border-width) solid;
		}

		> a {
			grid-column: span 2;

			align-self: end;
			color: var(--crimson-500);
		}

		> button {
			border: var(--bitter-500) var(--border-width) solid;
			background-color: var(--white);

			font-family: "Geist Mono";
			color: var(--bitter-500);
			font-weight: 700;
		}
	}

	#loading-modal {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		display: flex;
		justify-content: center;
		align-items: center;

		> #loading-modal--background {
			position: absolute;
			left: 0;
			top: 0;

			width: 100%;
			height: 100%;

			background-color: var(--bitter-50);
			opacity: 0.9;
		}
	}

	#loading-modal.pass-through {
		pointer-events: none;
		opacity: 0;
	}
}

@media (width >= 992px) {
	#login-grid {
		> label, > input {
			font-size: 19px;
		}

		> button {
			height: 32px;
			font-size: 19px;
		}
	}
}

@media (width < 992px) {
	#login-grid {
		> label, > input {
			font-size: 17px;
		}

		> input {
			padding-block: 8px;
		}

		> button {
			height: 48px;
			font-size: 17px;
		}
	}
}