#signUpModal {
	position: fixed;
	inset: 0;
	z-index: 10;
	background-color: var(--primary-bg-color);
	color: var(--primary-fg-color);
	color-scheme: dark;
}

#signUpContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 4.5rem 1rem 1.5rem;
	padding-top: max(4.5rem, calc(3rem + env(safe-area-inset-top)));
	padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
	padding-left: max(1rem, env(safe-area-inset-left));
	padding-right: max(1rem, env(safe-area-inset-right));
}

#signUpContentContainer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: min(328px, 100%);
	margin-top: auto;
	margin-bottom: auto;
	flex-shrink: 0;
}

#signUpHeader {
	font-size: 2.4em;
	font-weight: normal;
	margin: 0;
}

#signUpDescription {
	width: 100%;
	font-size: 1.2em;
	margin: 0;
	padding: 3vh 0 0 0;
	padding: 3dvh 0 0;
}

#signUpCloseButton:hover:not(:disabled) .buttonLabel,
#signUpCloseButton:focus-visible .buttonLabel {
	bottom: auto;
	top: calc(100% + 6px);
}

#signUpForm {
	display: flex;
	flex-direction: column;
	padding: 2vh 0;
	padding: 2dvh 0;
	width: 100%;
}

.signUpField {
	display: flex;
	flex-direction: column;
	gap: 0.75vh;
	gap: 0.75dvh;
	width: 100%;
	padding: 2vh 0;
	padding: 2dvh 0;
}

.signUpField label {
	font-size: 1.4em;
}

.signUpField input {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.2em;
	height: 2em;
	width: 100%;
	padding: 4px 0;
	color: var(--primary-fg-color);
	background-color: transparent;
	border: none;
	border-bottom: 2px solid var(--primary-fg-color);
	outline: none;
	box-sizing: border-box;
}

.signUpField input:focus-visible {
	outline: 3px solid var(--secondary-link-color);
	outline-offset: 3px;
}

#signUpSubmitButton {
	align-self: flex-end;
	margin-top: 1vh;
	margin-top: 1dvh;
}