main {
	display: grid;
	place-items: center;
	margin: 15px;
	flex: 1 1 auto;
}

#signup-form {
  width: 100%; max-width: 500px;
}

#signup {
	padding: 15px 20px;
	border-radius: 10px;
  box-sizing: border-box;
	width: 100%;
	background: var(--signup-background);
  border: 1px solid --signup-border-color;
  transition: all 100ms ease;
}
#signup.success {
  border: 1px solid var(--signup-success-border-color);
  background: var(--signup-success-background);
}

#signup--title {
	position: relative;
	font-size: 2rem;
  font-style: italic;
}

#signup--title a {
	position: absolute;
	right: 0; bottom: 0;
	display: inline-block;
	color: var(--link-color);
}

#signup--message {
	color: var(--error-text-color);
	font-size: 0.9rem;
	margin-bottom: 20px;
  font-style: italic;
  height: 0.9rem;
}

#signup--button {
	display: grid;
	place-items: center;
	width: 100%; height: 39px;
	border-radius: 7px;
  box-sizing: border-box;
  border: 1px solid var(--prompt-confirm-background);
	background: transparent;
  color: var(--prompt-confirm-background);
	font-size: 1rem;
  font-style: italic;
  letter-spacing: 3px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: all 100ms ease;
}

#signup label {
  position: absolute;
	display: block;
	opacity: 70%;
	font-size: 0.95rem;
  margin-left: 15px;
  z-index: 1;
  transform-origin: 0 50%;
  -webkit-user-select: none;
  user-select: none;
  transition: all 200ms ease;
}
#signup > *:has(input:placeholder-shown) > label {
  opacity: 50%;
  transform: translateY(7px);
  transition: all 200ms ease;
}
#signup > *:has(input:focus) > label,
#signup > *:has(input:not(:placeholder-shown)) > label {
  opacity: 70%;
  transform: translateY(-60%) scale(0.8);
  transition: all 200ms ease;
}

#signup > div:has(> input) {
  margin-bottom: 10px;
}

#signup input {
	width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--prompt-input-border-color);
  border-radius: 7px;
  background: transparent;
	padding: 7px 14px;
	font-size: 0.95rem;
	transition: all 200ms ease;
  z-index: 2;
}
#signup input:focus,
#signup input:not(:placeholder-shown) {
	outline: none !important;
  background: var(--prompt-input-hover-background);
  border-radius: 0;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--prompt-input-border-color);
}
#signup input::placeholder {
  opacity: 0;
}

#signup input:disabled,
#signup:has(:disabled) #signup--button {
  cursor: not-allowed;
}

#signup .info {
  opacity: 80%;
  font-size: smaller;
  margin-top: 3px;
  margin-bottom: 20px;
  margin-left: 10px;
}

#signup--bottom-text {
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
}

#signup--bottom-text a {
  color: royalblue;
  text-decoration: underline;
}


/* HOVER EFFECTS */
@media (hover: hover) {
	#signup--title a:hover {
		text-decoration: underline;
	}

	#signup--button:hover {
		background: var(--prompt-cancel-hover-background);
		transition: none;
	}
}

@media only screen and (max-width: 700px) {
  #signup-form {
    align-self: start;
    margin-top: 10vh;
  }

  #signup {
    background: transparent;
    border: none;
  }
}