html,
body {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--body-bg);
}
:root {
  --font-family: "Karla", sans-serif;
  --body-bg: #1e1f25;
  --btn-bg: #000;
  --btn-color: #cbcbcb;
  --btn-color-hover: #fff;
  --grad-color1: #eeaf61;
  --grad-color2: #fb9062;
  --grad-color3: #ee5d6c;
  --grad-color4: #ce4993;
  --grad-color5: #6a0d83;
}
.button {
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-size: 25px;
  padding: 20px;
  border-image: linear-gradient(
      109deg,
      var(--grad-color1),
      var(--grad-color2),
      var(--grad-color3),
      var(--grad-color4),
      var(--grad-color5)
    )
    1;
  border-width: 3px;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: Karla;
}
.button:hover {
  scale: 1.05;
  color: var(--btn-color-hover);
  border-image: linear-gradient(
      251deg,
      var(--grad-color1),
      var(--grad-color2),
      var(--grad-color3),
      var(--grad-color4),
      var(--grad-color5)
    )
    1;
}