.hero-btn {
  position: relative;
  width: 300px;
  margin: auto;
  height: 47px;
}
.hero-btn .btn {
  background-color: #ff0083;
  border: none;
  outline: none;
  text-decoration: none;
  color: #fff;
  display: inline-block;
  width: 300px;
  height: 47px;
  text-align: center;
  line-height: 47px;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 2px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-appearance: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  -moz-transform: perspective(600px) rotateX(0deg) scale(1);
  -ms-transform: perspective(600px) rotateX(0deg) scale(1);
  -webkit-transform: perspective(600px) rotateX(0deg) scale(1);
  transform: perspective(600px) rotateX(0deg) scale(1);
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.hero-btn .btn:hover {
  background-color: #e60076;
  -moz-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
}
.hero-btn .btn:active {
  -moz-transform: perspective(600px) rotateX(15deg) scale(0.9);
  -ms-transform: perspective(600px) rotateX(15deg) scale(0.9);
  -webkit-transform: perspective(600px) rotateX(15deg) scale(0.9);
  transform: perspective(600px) rotateX(15deg) scale(0.9);
  font-size: 21px;
  -moz-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 20px 40px rgba(255, 0, 131, 0.5);
}
.active .hero-btn .btn:active {
  -moz-transform: perspective(600px) rotateX(0deg) scale(1);
  -ms-transform: perspective(600px) rotateX(0deg) scale(1);
  -webkit-transform: perspective(600px) rotateX(0deg) scale(1);
  transform: perspective(600px) rotateX(0deg) scale(1);
  font-size: 22px;
  -moz-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  -webkit-box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
  box-shadow: 0 15px 40px rgba(255, 0, 131, 0.5);
}
.hero-btn .particles-circle {
  position: absolute;
  background-color: #ff0083;
  width: 30px;
  height: 30px;
  top: 10px;
  left: 50%;
  margin-left: -15px;
  z-index: -1;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  visibility: hidden;
}
.hero-btn .particles-circle:nth-of-type(odd) {
  border: solid 2px #ff0083;
  background-color: transparent;
}
@keyframes particles-1 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 125px;
    top: -55px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(1) {
  animation: particles-1 1.5s 0.025s;
}
@keyframes particles-2 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -15px;
    top: 53px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(2) {
  animation: particles-2 1.5s 0.05s;
}
@keyframes particles-3 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 69px;
    top: -64px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(3) {
  animation: particles-3 1.5s 0.075s;
}
@keyframes particles-4 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -156px;
    top: 150px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(4) {
  animation: particles-4 1.5s 0.1s;
}
@keyframes particles-5 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -249px;
    top: -155px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(5) {
  animation: particles-5 1.5s 0.125s;
}
@keyframes particles-6 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -75px;
    top: -117px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(6) {
  animation: particles-6 1.5s 0.15s;
}
@keyframes particles-7 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -154px;
    top: -211px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(7) {
  animation: particles-7 1.5s 0.175s;
}
@keyframes particles-8 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 152px;
    top: -234px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(8) {
  animation: particles-8 1.5s 0.2s;
}
@keyframes particles-9 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -23px;
    top: -200px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(9) {
  animation: particles-9 1.5s 0.225s;
}
@keyframes particles-10 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -179px;
    top: -146px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(10) {
  animation: particles-10 1.5s 0.25s;
}
@keyframes particles-11 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -110px;
    top: 74px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(11) {
  animation: particles-11 1.5s 0.275s;
}
@keyframes particles-12 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 229px;
    top: -151px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(12) {
  animation: particles-12 1.5s 0.3s;
}
@keyframes particles-13 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -23px;
    top: -38px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(13) {
  animation: particles-13 1.5s 0.325s;
}
@keyframes particles-14 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -91px;
    top: 139px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(14) {
  animation: particles-14 1.5s 0.35s;
}
@keyframes particles-15 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -34px;
    top: 29px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(15) {
  animation: particles-15 1.5s 0.375s;
}
@keyframes particles-16 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -61px;
    top: -206px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(16) {
  animation: particles-16 1.5s 0.4s;
}
@keyframes particles-17 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 122px;
    top: -192px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(17) {
  animation: particles-17 1.5s 0.425s;
}
@keyframes particles-18 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 44px;
    top: 184px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(18) {
  animation: particles-18 1.5s 0.45s;
}
@keyframes particles-19 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -130px;
    top: -134px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(19) {
  animation: particles-19 1.5s 0.475s;
}
@keyframes particles-20 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -28px;
    top: -33px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(20) {
  animation: particles-20 1.5s 0.5s;
}
@keyframes particles-21 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -238px;
    top: -179px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(21) {
  animation: particles-21 1.5s 0.525s;
}
@keyframes particles-22 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 36px;
    top: -120px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(22) {
  animation: particles-22 1.5s 0.55s;
}
@keyframes particles-23 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -242px;
    top: 197px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(23) {
  animation: particles-23 1.5s 0.575s;
}
@keyframes particles-24 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -66px;
    top: -32px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(24) {
  animation: particles-24 1.5s 0.6s;
}
@keyframes particles-25 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -226px;
    top: -172px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(25) {
  animation: particles-25 1.5s 0.625s;
}
@keyframes particles-26 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -160px;
    top: 243px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(26) {
  animation: particles-26 1.5s 0.65s;
}
@keyframes particles-27 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 84px;
    top: 220px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(27) {
  animation: particles-27 1.5s 0.675s;
}
@keyframes particles-28 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -86px;
    top: 238px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(28) {
  animation: particles-28 1.5s 0.7s;
}
@keyframes particles-29 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -31px;
    top: -9px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(29) {
  animation: particles-29 1.5s 0.725s;
}
@keyframes particles-30 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 17px;
    top: 223px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(30) {
  animation: particles-30 1.5s 0.75s;
}
@keyframes particles-31 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -91px;
    top: 198px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(31) {
  animation: particles-31 1.5s 0.775s;
}
@keyframes particles-32 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -67px;
    top: 172px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(32) {
  animation: particles-32 1.5s 0.8s;
}
@keyframes particles-33 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 19px;
    top: 160px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(33) {
  animation: particles-33 1.5s 0.825s;
}
@keyframes particles-34 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: 222px;
    top: -137px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(34) {
  animation: particles-34 1.5s 0.85s;
}
@keyframes particles-35 {
  from {
    transform: scale(1);
    visibility: visible;
  }
  to {
    left: -49px;
    top: 46px;
    transform: scale(0);
    visibility: hidden;
  }
}
.active .hero-btn .particles-circle:nth-of-type(35) {
  animation: particles-35 1.5s 0.875s;
}

.v-align {
  position: absolute;
  text-align: center;
  left: 0;
  width: 100%;
  max-height: 90vh;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.wrap__sparks {
  transform: translateZ(-100px);
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  background: #f8faff;
  height: 100vh;
  position: relative;
}

h1 {
  font-size: 24px;
  display: block;
  text-align: center;
  color: #6a11cb;
  font-weight: 500;
}

.made-with-love {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  z-index: 9999;
  font-family: arial;
  color: #ff0083;
  font-weight: 600;
}
.made-with-love i {
  font-style: normal;
  font-size: 14px;
  position: relative;
  top: 2px;
}
.made-with-love a {
  color: #ff0083;
  text-decoration: none;
}
.made-with-love a:hover {
  text-decoration: underline;
}
.made-with-love .dribble img {
  max-width: 100%;
  width: 26px;
  position: relative;
  top: -2px;
  vertical-align: middle;
}