html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
}
body * {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.star .wave:nth-child(1) {
  transform: scale(0.25);
}
.star .wave:nth-child(2) {
  transform: scale(0.5);
}
.star .wave:nth-child(3) {
  transform: scale(0.75);
}
.star .wave:nth-child(4) {
  transform: scale(1);
}
.star .wave .line {
  width: 100px;
  height: 5px;
}
.star .wave .line:nth-child(1) {
  transform: rotate(0deg) translate(100px);
}
.star .wave .line:nth-child(1) .dot {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  background-color: red;
  box-shadow: red 50px 0px 10px 10px;
}
.star .wave .line:nth-child(2) {
  transform: rotate(-7.2deg) translate(100px);
}
.star .wave .line:nth-child(2) .dot {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
  background-color: #ff1f00;
  box-shadow: #ff1f00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(3) {
  transform: rotate(-14.4deg) translate(100px);
}
.star .wave .line:nth-child(3) .dot {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  background-color: #ff3d00;
  box-shadow: #ff3d00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(4) {
  transform: rotate(-21.6deg) translate(100px);
}
.star .wave .line:nth-child(4) .dot {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
  background-color: #ff5c00;
  box-shadow: #ff5c00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(5) {
  transform: rotate(-28.8deg) translate(100px);
}
.star .wave .line:nth-child(5) .dot {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  background-color: #ff7a00;
  box-shadow: #ff7a00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(6) {
  transform: rotate(-36deg) translate(100px);
}
.star .wave .line:nth-child(6) .dot {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
  background-color: #ff9900;
  box-shadow: #ff9900 50px 0px 10px 10px;
}
.star .wave .line:nth-child(7) {
  transform: rotate(-43.2deg) translate(100px);
}
.star .wave .line:nth-child(7) .dot {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  background-color: #ffb800;
  box-shadow: #ffb800 50px 0px 10px 10px;
}
.star .wave .line:nth-child(8) {
  transform: rotate(-50.4deg) translate(100px);
}
.star .wave .line:nth-child(8) .dot {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
  background-color: #ffd600;
  box-shadow: #ffd600 50px 0px 10px 10px;
}
.star .wave .line:nth-child(9) {
  transform: rotate(-57.6deg) translate(100px);
}
.star .wave .line:nth-child(9) .dot {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  background-color: #fff500;
  box-shadow: #fff500 50px 0px 10px 10px;
}
.star .wave .line:nth-child(10) {
  transform: rotate(-64.8deg) translate(100px);
}
.star .wave .line:nth-child(10) .dot {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
  background-color: #ebff00;
  box-shadow: #ebff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(11) {
  transform: rotate(-72deg) translate(100px);
}
.star .wave .line:nth-child(11) .dot {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  background-color: #ccff00;
  box-shadow: #ccff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(12) {
  transform: rotate(-79.2deg) translate(100px);
}
.star .wave .line:nth-child(12) .dot {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
  background-color: #adff00;
  box-shadow: #adff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(13) {
  transform: rotate(-86.4deg) translate(100px);
}
.star .wave .line:nth-child(13) .dot {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  background-color: #8fff00;
  box-shadow: #8fff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(14) {
  transform: rotate(-93.6deg) translate(100px);
}
.star .wave .line:nth-child(14) .dot {
  -webkit-animation-delay: -1.3s;
          animation-delay: -1.3s;
  background-color: #70ff00;
  box-shadow: #70ff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(15) {
  transform: rotate(-100.8deg) translate(100px);
}
.star .wave .line:nth-child(15) .dot {
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
  background-color: #52ff00;
  box-shadow: #52ff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(16) {
  transform: rotate(-108deg) translate(100px);
}
.star .wave .line:nth-child(16) .dot {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
  background-color: #33ff00;
  box-shadow: #33ff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(17) {
  transform: rotate(-115.2deg) translate(100px);
}
.star .wave .line:nth-child(17) .dot {
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
  background-color: #14ff00;
  box-shadow: #14ff00 50px 0px 10px 10px;
}
.star .wave .line:nth-child(18) {
  transform: rotate(-122.4deg) translate(100px);
}
.star .wave .line:nth-child(18) .dot {
  -webkit-animation-delay: -1.7s;
          animation-delay: -1.7s;
  background-color: #00ff0a;
  box-shadow: #00ff0a 50px 0px 10px 10px;
}
.star .wave .line:nth-child(19) {
  transform: rotate(-129.6deg) translate(100px);
}
.star .wave .line:nth-child(19) .dot {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  background-color: #00ff29;
  box-shadow: #00ff29 50px 0px 10px 10px;
}
.star .wave .line:nth-child(20) {
  transform: rotate(-136.8deg) translate(100px);
}
.star .wave .line:nth-child(20) .dot {
  -webkit-animation-delay: -1.9s;
          animation-delay: -1.9s;
  background-color: #00ff47;
  box-shadow: #00ff47 50px 0px 10px 10px;
}
.star .wave .line:nth-child(21) {
  transform: rotate(-144deg) translate(100px);
}
.star .wave .line:nth-child(21) .dot {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  background-color: #00ff66;
  box-shadow: #00ff66 50px 0px 10px 10px;
}
.star .wave .line:nth-child(22) {
  transform: rotate(-151.2deg) translate(100px);
}
.star .wave .line:nth-child(22) .dot {
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
  background-color: #00ff85;
  box-shadow: #00ff85 50px 0px 10px 10px;
}
.star .wave .line:nth-child(23) {
  transform: rotate(-158.4deg) translate(100px);
}
.star .wave .line:nth-child(23) .dot {
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
  background-color: #00ffa3;
  box-shadow: #00ffa3 50px 0px 10px 10px;
}
.star .wave .line:nth-child(24) {
  transform: rotate(-165.6deg) translate(100px);
}
.star .wave .line:nth-child(24) .dot {
  -webkit-animation-delay: -2.3s;
          animation-delay: -2.3s;
  background-color: #00ffc2;
  box-shadow: #00ffc2 50px 0px 10px 10px;
}
.star .wave .line:nth-child(25) {
  transform: rotate(-172.8deg) translate(100px);
}
.star .wave .line:nth-child(25) .dot {
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
  background-color: #00ffe0;
  box-shadow: #00ffe0 50px 0px 10px 10px;
}
.star .wave .line:nth-child(26) {
  transform: rotate(-180deg) translate(100px);
}
.star .wave .line:nth-child(26) .dot {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
  background-color: aqua;
  box-shadow: aqua 50px 0px 10px 10px;
}
.star .wave .line:nth-child(27) {
  transform: rotate(-187.2deg) translate(100px);
}
.star .wave .line:nth-child(27) .dot {
  -webkit-animation-delay: -2.6s;
          animation-delay: -2.6s;
  background-color: #00e0ff;
  box-shadow: #00e0ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(28) {
  transform: rotate(-194.4deg) translate(100px);
}
.star .wave .line:nth-child(28) .dot {
  -webkit-animation-delay: -2.7s;
          animation-delay: -2.7s;
  background-color: #00c2ff;
  box-shadow: #00c2ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(29) {
  transform: rotate(-201.6deg) translate(100px);
}
.star .wave .line:nth-child(29) .dot {
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
  background-color: #00a3ff;
  box-shadow: #00a3ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(30) {
  transform: rotate(-208.8deg) translate(100px);
}
.star .wave .line:nth-child(30) .dot {
  -webkit-animation-delay: -2.9s;
          animation-delay: -2.9s;
  background-color: #0085ff;
  box-shadow: #0085ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(31) {
  transform: rotate(-216deg) translate(100px);
}
.star .wave .line:nth-child(31) .dot {
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  background-color: #0066ff;
  box-shadow: #0066ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(32) {
  transform: rotate(-223.2deg) translate(100px);
}
.star .wave .line:nth-child(32) .dot {
  -webkit-animation-delay: -3.1s;
          animation-delay: -3.1s;
  background-color: #0047ff;
  box-shadow: #0047ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(33) {
  transform: rotate(-230.4deg) translate(100px);
}
.star .wave .line:nth-child(33) .dot {
  -webkit-animation-delay: -3.2s;
          animation-delay: -3.2s;
  background-color: #0029ff;
  box-shadow: #0029ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(34) {
  transform: rotate(-237.6deg) translate(100px);
}
.star .wave .line:nth-child(34) .dot {
  -webkit-animation-delay: -3.3s;
          animation-delay: -3.3s;
  background-color: #000aff;
  box-shadow: #000aff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(35) {
  transform: rotate(-244.8deg) translate(100px);
}
.star .wave .line:nth-child(35) .dot {
  -webkit-animation-delay: -3.4s;
          animation-delay: -3.4s;
  background-color: #1400ff;
  box-shadow: #1400ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(36) {
  transform: rotate(-252deg) translate(100px);
}
.star .wave .line:nth-child(36) .dot {
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
  background-color: #3300ff;
  box-shadow: #3300ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(37) {
  transform: rotate(-259.2deg) translate(100px);
}
.star .wave .line:nth-child(37) .dot {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
  background-color: #5200ff;
  box-shadow: #5200ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(38) {
  transform: rotate(-266.4deg) translate(100px);
}
.star .wave .line:nth-child(38) .dot {
  -webkit-animation-delay: -3.7s;
          animation-delay: -3.7s;
  background-color: #7000ff;
  box-shadow: #7000ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(39) {
  transform: rotate(-273.6deg) translate(100px);
}
.star .wave .line:nth-child(39) .dot {
  -webkit-animation-delay: -3.8s;
          animation-delay: -3.8s;
  background-color: #8f00ff;
  box-shadow: #8f00ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(40) {
  transform: rotate(-280.8deg) translate(100px);
}
.star .wave .line:nth-child(40) .dot {
  -webkit-animation-delay: -3.9s;
          animation-delay: -3.9s;
  background-color: #ad00ff;
  box-shadow: #ad00ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(41) {
  transform: rotate(-288deg) translate(100px);
}
.star .wave .line:nth-child(41) .dot {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  background-color: #cc00ff;
  box-shadow: #cc00ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(42) {
  transform: rotate(-295.2deg) translate(100px);
}
.star .wave .line:nth-child(42) .dot {
  -webkit-animation-delay: -4.1s;
          animation-delay: -4.1s;
  background-color: #eb00ff;
  box-shadow: #eb00ff 50px 0px 10px 10px;
}
.star .wave .line:nth-child(43) {
  transform: rotate(-302.4deg) translate(100px);
}
.star .wave .line:nth-child(43) .dot {
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
  background-color: #ff00f5;
  box-shadow: #ff00f5 50px 0px 10px 10px;
}
.star .wave .line:nth-child(44) {
  transform: rotate(-309.6deg) translate(100px);
}
.star .wave .line:nth-child(44) .dot {
  -webkit-animation-delay: -4.3s;
          animation-delay: -4.3s;
  background-color: #ff00d6;
  box-shadow: #ff00d6 50px 0px 10px 10px;
}
.star .wave .line:nth-child(45) {
  transform: rotate(-316.8deg) translate(100px);
}
.star .wave .line:nth-child(45) .dot {
  -webkit-animation-delay: -4.4s;
          animation-delay: -4.4s;
  background-color: #ff00b8;
  box-shadow: #ff00b8 50px 0px 10px 10px;
}
.star .wave .line:nth-child(46) {
  transform: rotate(-324deg) translate(100px);
}
.star .wave .line:nth-child(46) .dot {
  -webkit-animation-delay: -4.5s;
          animation-delay: -4.5s;
  background-color: #ff0099;
  box-shadow: #ff0099 50px 0px 10px 10px;
}
.star .wave .line:nth-child(47) {
  transform: rotate(-331.2deg) translate(100px);
}
.star .wave .line:nth-child(47) .dot {
  -webkit-animation-delay: -4.6s;
          animation-delay: -4.6s;
  background-color: #ff007a;
  box-shadow: #ff007a 50px 0px 10px 10px;
}
.star .wave .line:nth-child(48) {
  transform: rotate(-338.4deg) translate(100px);
}
.star .wave .line:nth-child(48) .dot {
  -webkit-animation-delay: -4.7s;
          animation-delay: -4.7s;
  background-color: #ff005c;
  box-shadow: #ff005c 50px 0px 10px 10px;
}
.star .wave .line:nth-child(49) {
  transform: rotate(-345.6deg) translate(100px);
}
.star .wave .line:nth-child(49) .dot {
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
  background-color: #ff003d;
  box-shadow: #ff003d 50px 0px 10px 10px;
}
.star .wave .line:nth-child(50) {
  transform: rotate(-352.8deg) translate(100px);
}
.star .wave .line:nth-child(50) .dot {
  -webkit-animation-delay: -4.9s;
          animation-delay: -4.9s;
  background-color: #ff001f;
  box-shadow: #ff001f 50px 0px 10px 10px;
}
.star .wave .line .dot {
  width: 30px;
  height: 5px;
  border-radius: 50%;
  left: initial;
  -webkit-animation: 1s Wave ease-in-out infinite;
          animation: 1s Wave ease-in-out infinite;
}

@-webkit-keyframes Wave {
  80% {
    transform: translate(170px) scale(0.25);
  }
}

@keyframes Wave {
  80% {
    transform: translate(170px) scale(0.25);
  }
}