/*
 https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
 box-shadow: [inset?] [top] [left] [blur] [size] [color];
 Tips:
 - We're setting all the blurs to 0 since we want a solid fill.
 - Add the inset keyword so the box-shadow is on the inside of the element
 - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right])
 - Multiple shadows can be stacked
 - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy.
 */
.pulses:hover, .pulses:focus {
  animation: pulses 1s !important;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0) !important;
}
@keyframes pulses {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}
.fill {
  --color: #a972cb!important;
  --hover: #a972cb!important;
}
.pulses {
  --color: #f53e6a!important;
  --hover: #f53e6a!important;
}
.anime_button div {
  color: var(--color) !important;
  transition: 0.25s !important;
}
.anime_button div:hover, .anime_button div:focus {
  border-color: var(--hover) !important;
  color: #fff !important;
}
.anime_button .buttons {
  border: 2px solid !important;
  max-width: 250px;
  text-align: center;
  font: inherit;
}