h1{
 color: azure;
}
body {
  background:black;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.voltage-button {
  position:relative;
  button {
    color:white;
    background: #0D1127;
    padding:1.6rem 5rem 1.8rem 5rem;
    border-radius:5rem;
    border:5px solid #5978F3;
    font-size:1.8rem;
    line-height:1em;
    letter-spacing:0.075em;
    transition:background 0.3s;
    &:hover {
      cursor:pointer;
      background: #0F1C53;
      + svg, +svg + .dots {
        opacity:1;
      }
    }
  }
  svg {
    display:block;
    position:absolute;
    top:-0.75em;
    left:-0.25em;
    width:calc(100% + 0.5em);
    height:calc(100% + 1.5em);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.4s;
    transition-delay:0.1s;
    path {
      stroke-dasharray: 100;
      filter: url('#glow');
      &.line-1 {
        stroke:#f6de8d;
        stroke-dashoffset: 0;
        animation: spark-1 3s linear infinite;
      }
      &.line-2 {
        stroke:#6bfeff;
        stroke-dashoffset: 500;
        animation: spark-2 3s linear infinite;
      }
    }
  }
  .dots {
    opacity:0;
    transition:opacity 0.3s;
    transition-delay:0.4s;
    .dot {
      width:1rem;
      height:1rem;
      background:white;
      border-radius:100%;
      position:absolute;
      opacity:0;
    }
    .dot-1 {
      top:0;
      left:20%;
      animation: fly-up 3s linear infinite;
    }
    .dot-2 {
      top:0;
      left:55%;
      animation: fly-up 3s linear infinite;
      animation-delay: 0.5s;
    }
    .dot-3 {
      top:0;
      left:80%;
      animation: fly-up 3s linear infinite;
      animation-delay: 1s;
    }
    .dot-4 {
      bottom:0;
      left:30%;
      animation: fly-down 3s linear infinite;
      animation-delay: 2.5s;
    }
    .dot-5 {
      bottom:0;
      left:65%;
      animation: fly-down 3s linear infinite;
      animation-delay: 1.5s;
    }
  }
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}
@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}
@keyframes fly-up{
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(-1.5rem) scale(0.4);}
  10%,100%{ opacity:0;  transform:translateY(-3rem) scale(0.2);}
}
@keyframes fly-down {
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(1.5rem) scale(0.4);}
  10%,100%{ opacity:0;  transform:translateY(3rem) scale(0.2);}
}