.button {
  border: none;
  appearance: none;

  background-color: var(--main-300);
  color: var(--white);
  padding: 1rem 1.5rem;

  font-size: 1rem;
  line-height: 1.5;
  font-weight: 800;
  border-radius: 0.5rem;

  cursor: pointer;

  transition: background-color var(--duration--short) var(--easing--standard);
}

.button:hover {
  background-color: var(--main-400);
}

.button:active {
  background-color: var(--main-500);
}

.button--light {
  background-color: var(--main-100);
}

.button--light:hover {
  background-color: var(--main-200);
}

.button--light:focus {
  background-color: var(--main-300);
}