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;

		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;
		}
	}
}