:root {
  --blue: #1a4580;
  --red: #8a181a;
  --med-red: #B52022;
  --reverse-hover: LightGoldenrodYellow;
  --text: DarkSlateGray;
  --main-bg: #dce0e5;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
a.button {
  outline: none;
}

input[type=text],
input[type=email],
input[type=password],
select {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  display: inline-block;
  padding: 0.5em;
}

button,
input[type=submit],
a.button {
  background: color-mix(in srgb, var(--blue) 85%, black 15%);
  border: 2px solid white;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875em;
  letter-spacing: 1px;
  line-height: 1.35;
  padding: 0.75em 2.5em;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 250ms linear;
}

button:hover,
input[type=submit]:hover,
a.button:hover {
  background: var(--blue);
}

form {
  margin: 1em auto;
  max-width: 600px;
}

form label {
  display: block;
  margin: 0.5em 0;
}

@media only screen and (min-width: 650px) {
  form {
    align-items: flex-end;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  form label {
    margin: 0;
    text-align: left;
  }
}