fuel-stats/public/css/form.css

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

body {
  background-color: var(--clr-secondary);
}

.form .header-form {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.form .header-form img {
  height: 5rem;
}

.form form {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--clr-tertiary);
  gap: .5rem;
  border-radius: var(--border-radious);
  border: var(--borderWidth-thin) solid var(--clr-border);
}

.form form input,
select {
  background-color: var(--clr-secondary);
  caret-color: white;
  color: white;
  padding: .3rem;
  border-radius: var(--border-radious);
  border: var(--borderWidth-thin) solid var(--clr-border);
  width: 15rem;
}

.form form input[type="submit"] {
  background-color: var(--clr-green);
  color: white;
}

.form .error {
  width: 17rem;
  padding: 1rem;
  background-color: var(--clr-danger-muted);
  border-radius: var(--border-radious);
  border: var(--borderWidth-thin) solid var(--clr-border-danger);
  margin-bottom: 1rem;
  color: white;
}

.form small.error {
  width: 15rem;
}

.form .bordered {
  border-radius: var(--border-radious);
  border: var(--borderWidth-thin) solid var(--clr-border);
  width: 17rem;
  padding: 1rem;
  margin-top: 1rem;
  text-align: center;
}

.form .bordered a {
  text-decoration: none;
  color: var(--clr-link-blue);
}

.form .bordered a:hover {
  text-decoration: underline;
}