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;

	#previous-action {
		background: none;
		border: none;

		color: var(--crimson-500);
		text-align: left;
		padding-inline: 0;
	}

	#signup-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 8px;

		> label {
			grid-column: span 3;

			color: var(--bitter-500);
		}

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

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

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

		> ul {
			grid-column: span 3;
			padding-block: 8px;
		}

		> a {
			grid-column: span 2;
			align-self: end;
		}
	}
}

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

	display: grid;
	gap: 24px;

	position: relative;

	#pick-me {
		color: var(--bitter-700);
		margin: 0;

		transform: scaleY(1.2);
		transform-origin: bottom;
	}

	#instruction, #information-details {
		color: var(--bitter-500);
	}

	a {
		color: var(--crimson-500);
	}
}

@media (width >= 992px) {
	#pick-me {
		font-size: 27px;
	}

	#previous-action {
		font-size: 22px;
		padding: 4px;
	}

	#signup-grid {
		> label, > input {
			font-size: 19px;
		}

		> input {
			grid-column: span 2;
		}

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

@media (width < 992px) {
	#pick-me {
		font-size: 27px;
	}

	#previous-action {
		font-size: 17px;
		padding: 6px;
	}

	#signup-grid {
		> label, > input {
			font-size: 17px;
		}

		> input {
			padding-block: 8px;
			grid-column: span 3;
		}

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

			grid-column: 3;
			grid-row: 4;
		}
	}
}