.form-card {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  
  padding: 2rem;
  border-radius: 12px;
  background: var(--color-bg-card);
  
  font-family: var(--font-text);
}

.form-card a {
	font-size: 8pt;
	text-decoration: none;
	color: #808080;
	transition: color 0.15s;
}

.form-card a:hover {
	color: #09aeed;
}

.form-header {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  justify-content: center;
  align-items: center;
}

.form-header h1 {
	font-family: var(--font-logo);
	display: flex;
}

.form-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  
  justify-content: center;
  align-items: center;
  
  font-size: 12pt;
}

.alerts {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid #808080;
  border-radius: 3px;
  
  background: #e0e0e0;
  
  justify-content: center;
  align-items: center;
  
  font-size: 10pt;
}

.alerts li {
  list-style: non;
  color: red;
  font-weight: bold;
}


.field input {
	padding: 8px 16px;
}

.field-validation {
  color: red;
  font-size: 8pt;
}

.field button {
	border-color: #000;
	color: #000;
}

.field button:hover {
	background-color: #09aeed;
	color: #fff;
}

.form-footer {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  
  font-size: 8pt;
}