@import url("https://fonts.googleapis.com/css?family=Caveat");
button {
      --glow-color: rgb(217, 176, 255);
      --glow-spread-color: rgba(191, 123, 255, 0.781);
      --enhanced-glow-color: rgb(231, 206, 255);
      --btn-color: rgb(100, 61, 136);
      border: 0.25em solid var(--glow-color);
      padding: 1em 3em;
      color: var(--glow-color);
      font-size: 15px;
      font-weight: bold;
      cursor: pointer;
      background-color: var(--btn-color);
      border-radius: 1em;
      outline: none;
      box-shadow: 0 0 1em 0.25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 0.74em 0.25em var(--glow-color);
      text-shadow: 0 0 0.5em var(--glow-color);
      position: relative;
      transition: all 0.3s;
      align-items: center;
      left: 42%;
      bottom: 100%;
    }

    button::after {
      pointer-events: none;
      content: "";
      position: absolute;
      top: 120%;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: var(--glow-spread-color);
      filter: blur(2em);
      opacity: 0.7;
      transform: perspective(1.5em) rotateX(35deg) scale(1, 0.6);
      align-items: center;
    }

    button:hover {
      color: var(--btn-color);
      background-color: var(--glow-color);
      box-shadow: 0 0 1em 0.25em var(--glow-color),
      0 0 4em 2em var(--glow-spread-color),
      inset 0 0 0.75em 0.25em var(--glow-color);
    }

    button:active {
      box-shadow: 0 0 0.6em 0.25em var(--glow-color),
      0 0 2.5em 2em var(--glow-spread-color),
      inset 0 0 0.5em 0.25em var(--glow-color);
    }

    body{
        background-color: black;
    }
h1{
  font-size: calc(1.5em + 5vw);
  color: #fff;
  font-family: "Caveat", sans-serif;
  text-align: center;
  padding: 0.5em;
  transform: rotate(-4deg) translateY(-15vh);
}