/* modified From Uiverse.io by alexroumi */ 

button {
  /* theme variables */
  --bg: #e8e8e8;
  --fg: #3a4145;
  --accent: #D37939;
  --hover-fg: #e8e8e8;

  padding: 15px 25px;
  border: none;
  border-radius: 15px;
  font-weight: 1000;
  font-size: 17px;
  position: relative;
  overflow: hidden;
  z-index: 1;

  color: var(--fg);
  background: var(--bg);

  box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
  border: 1px solid var(--fg);
  transition: color 250ms, background 250ms;
  cursor: pointer;
}

button::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  z-index: -1;
  transition: width 250ms;
}

button:hover {
  color: var(--hover-fg);
}

button:hover::before {
  width: 100%;
}

/* Dark mode overrides */
button.dark {
  --bg: #D37939;
  --fg: #e8e8e8;
  --accent: #e8e8e8;
  --hover-fg: #3a4145;
}