main {
  display: grid;
  height: calc(100vh - 50px);
  place-content: center;
}

div.input-group > input {
  width: calc(300px - 40px);
  padding: 0 20px;
  display: block;
  height: 50px;
  outline: none;
  font-size: 0.9rem;
  margin-bottom: 20px;
  border: 5px solid transparent;
  margin: 10px auto;

  color: var(--input-color);
  background-color: var(--input-background-color);
}
div.input-group > input.valid {
  border: 5px solid var(--button-color);
}

div.input-group > button {
  margin: 0 auto;
  display: block;
  height: 50px;
  width: 150px;
  outline: none;
  border: none;
  font-size: 0.9rem;
  color: var(--button-text-color);
  background-color: var(--button-color);
  transition: background-color 200ms ease;
}

div.input-group > button[disabled] {
  background-color: var(--background-color-disabled);
}

div.input-group > button:hover:not([disabled]) {
  background-color: var(--button-dimmed-color);
}

div.actions > button.outline {
  display: inline-block;
  height: 50px;
  background-color: transparent;
  color: var(--button-text-color);
  border: none;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: underline;
  width: 150px;

  cursor: pointer;
}

footer {
  height: 50px;
}

footer > small.copyright {
  display: block;
  text-align: center;
  font-size: 0.85rem;
}

footer > small.copyright > a {
  color: var(--text-color);
}