html {
	min-height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

section.home {
	align-self: center;
	background: var(--card-background);
	border-radius: var(--border-radius-container);
	box-shadow: var(--card-box-shadow);
	column-gap: 4rem;
	display: grid;
	grid-template-columns: 1fr auto;
	margin: auto;
	max-width: 60rem;
	padding: 3rem;
	row-gap: 1rem;

	h1 {
		align-self: flex-end;
		font-size: 3.5rem;
		justify-self: center;
		margin: 0
	}

	h2 {
		margin: 0;
	}

	.button {
		grid-column-start: 1;
		width: 8rem;
		text-align: center;
	}

	.login-buttons {
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		justify-self: center;
	}

	form {
		align-self: flex-end;
		background: #f0f0f0;
		border-radius: var(--border-radius-container);
		box-shadow: 0 0 .25rem 0 rgba(0, 0, 0, .25);
		display: flex;
		flex-direction: column;
		gap: 1rem;
		grid-row: 1 / 3;
		grid-column-start: 2;
		padding: 1.5rem;

		input {
			border-radius: .125rem;
			border: .0625rem solid var(--border-color);
			font-family: monospace;
			font-size: 4rem;
			font-weight: 700;
			padding: 0 0 0 .5rem;
			text-transform: uppercase;
			width: 7.55ch;
			letter-spacing: .25ch;
		}

		button {
			align-self: flex-end;
			width: 100%;
		}
	}
}

@media screen and (max-width: 1023px) {
	section.home {
		display: flex;
		flex-direction: column;
		padding: 1.5rem;

		h1 {
			align-self: center;
		}

		.button {
			width: auto;
		}

		.login-buttons {
			align-self: center;
			margin-bottom: 1.5rem;
			flex-direction: row;
		}

		form {
			input {
				font-size: 3rem;
			}
		}
	}
}