/* based on https://github.com/remix-run/remix/blob/4a23e6e3a861238ea5ad285c7d436102bdd43564/templates/remix-tutorial/app/app.css#L32 */

button {
  font-size: 1rem;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  box-shadow:
    0 0px 1px hsla(0, 0%, 0%, 0.2),
    0 1px 2px hsla(0, 0%, 0%, 0.2);
  background-color: white;
  line-height: 1.5;
  margin: 0.4rem;
  font-weight: 500;
}

button:hover {
  box-shadow:
    0 0px 1px hsla(0, 0%, 0%, 0.6),
    0 1px 2px hsla(0, 0%, 0%, 0.2);
}

button:active {
  box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.4);
  transform: translateY(1px);
}