* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
}

html, body {
  background: #000;
  overflow: hidden;
}
html h1, body h1 {
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  padding: 50vh 0;
  text-align: center;
  width: 100%;
  font-size: 3em;
}

.star {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/star.png);
  background-size: cover;
  border-radius: 100%;
  width: 2em;
  height: 2em;
  opacity: 0;
}

.firework {
  background-size: cover;
  top: 0;
  opacity: 0;
  width: 200px;
  height: 200px;
}

.firework:nth-of-type(1) {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/green.png);
  margin: 1vh 26vw;
  -webkit-animation: firework 0.6s linear infinite forwards;
          animation: firework 0.6s linear infinite forwards;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.firework:nth-of-type(2) {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/green.png);
  margin: 5vh 45vw;
  -webkit-animation: firework 0.8s linear infinite forwards;
          animation: firework 0.8s linear infinite forwards;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.firework:nth-of-type(3) {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/green.png);
  margin: 4vh 8vw;
  -webkit-animation: firework 6s linear infinite forwards;
          animation: firework 6s linear infinite forwards;
  -webkit-animation-delay: 3.3333333333s;
          animation-delay: 3.3333333333s;
}

.firework:nth-of-type(4) {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/green.png);
  margin: 2vh 15vw;
  -webkit-animation: firework 5.6s linear infinite forwards;
          animation: firework 5.6s linear infinite forwards;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.firework:nth-of-type(5) {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/blue.png);
  margin: 3vh 20vw;
  -webkit-animation: firework 10s linear infinite forwards;
          animation: firework 10s linear infinite forwards;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.star:nth-of-type(1) {
  margin: 1vh 19vw;
  -webkit-animation: flickr 2s linear infinite forwards;
          animation: flickr 2s linear infinite forwards;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

.star:nth-of-type(2) {
  margin: 4vh 48vw;
  -webkit-animation: flickr 2s linear infinite forwards;
          animation: flickr 2s linear infinite forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.star:nth-of-type(3) {
  margin: 2vh 73vw;
  -webkit-animation: flickr 9s linear infinite forwards;
          animation: flickr 9s linear infinite forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.star:nth-of-type(4) {
  margin: 4vh 5vw;
  -webkit-animation: flickr 8s linear infinite forwards;
          animation: flickr 8s linear infinite forwards;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

.star:nth-of-type(5) {
  margin: 5vh 66vw;
  -webkit-animation: flickr 10s linear infinite forwards;
          animation: flickr 10s linear infinite forwards;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.star:nth-of-type(6) {
  margin: 5vh 63vw;
  -webkit-animation: flickr 12s linear infinite forwards;
          animation: flickr 12s linear infinite forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.star:nth-of-type(7) {
  margin: 5vh 42vw;
  -webkit-animation: flickr 28s linear infinite forwards;
          animation: flickr 28s linear infinite forwards;
  -webkit-animation-delay: 0.2857142857s;
          animation-delay: 0.2857142857s;
}

.star:nth-of-type(8) {
  margin: 2vh 94vw;
  -webkit-animation: flickr 24s linear infinite forwards;
          animation: flickr 24s linear infinite forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.star:nth-of-type(9) {
  margin: 7vh 33vw;
  -webkit-animation: flickr 36s linear infinite forwards;
          animation: flickr 36s linear infinite forwards;
  -webkit-animation-delay: 0.2222222222s;
          animation-delay: 0.2222222222s;
}

.star:nth-of-type(10) {
  margin: 1vh 29vw;
  -webkit-animation: flickr 30s linear infinite forwards;
          animation: flickr 30s linear infinite forwards;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.star:nth-of-type(11) {
  margin: 9vh 47vw;
  -webkit-animation: flickr 44s linear infinite forwards;
          animation: flickr 44s linear infinite forwards;
  -webkit-animation-delay: 0.2727272727s;
          animation-delay: 0.2727272727s;
}

.star:nth-of-type(12) {
  margin: 10vh 42vw;
  -webkit-animation: flickr 12s linear infinite forwards;
          animation: flickr 12s linear infinite forwards;
  -webkit-animation-delay: 0.3333333333s;
          animation-delay: 0.3333333333s;
}

.star:nth-of-type(13) {
  margin: 10vh 58vw;
  -webkit-animation: flickr 26s linear infinite forwards;
          animation: flickr 26s linear infinite forwards;
  -webkit-animation-delay: 0.1538461538s;
          animation-delay: 0.1538461538s;
}

.star:nth-of-type(14) {
  margin: 9vh 2vw;
  -webkit-animation: flickr 14s linear infinite forwards;
          animation: flickr 14s linear infinite forwards;
  -webkit-animation-delay: 0.2142857143s;
          animation-delay: 0.2142857143s;
}

.star:nth-of-type(15) {
  margin: 9vh 12vw;
  -webkit-animation: flickr 60s linear infinite forwards;
          animation: flickr 60s linear infinite forwards;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.star:nth-of-type(16) {
  margin: 3vh 29vw;
  -webkit-animation: flickr 48s linear infinite forwards;
          animation: flickr 48s linear infinite forwards;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

.star:nth-of-type(17) {
  margin: 8vh 41vw;
  -webkit-animation: flickr 34s linear infinite forwards;
          animation: flickr 34s linear infinite forwards;
  -webkit-animation-delay: 0.2352941176s;
          animation-delay: 0.2352941176s;
}

.star:nth-of-type(18) {
  margin: 3vh 71vw;
  -webkit-animation: flickr 36s linear infinite forwards;
          animation: flickr 36s linear infinite forwards;
  -webkit-animation-delay: 0.0555555556s;
          animation-delay: 0.0555555556s;
}

.star:nth-of-type(19) {
  margin: 4vh 81vw;
  -webkit-animation: flickr 76s linear infinite forwards;
          animation: flickr 76s linear infinite forwards;
  -webkit-animation-delay: 0.1052631579s;
          animation-delay: 0.1052631579s;
}

.star:nth-of-type(20) {
  margin: 10vh 68vw;
  -webkit-animation: flickr 60s linear infinite forwards;
          animation: flickr 60s linear infinite forwards;
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
}

.star:nth-of-type(21) {
  margin: 3vh 33vw;
  -webkit-animation: flickr 21s linear infinite forwards;
          animation: flickr 21s linear infinite forwards;
  -webkit-animation-delay: 0.0476190476s;
          animation-delay: 0.0476190476s;
}

.star:nth-of-type(22) {
  margin: 1vh 37vw;
  -webkit-animation: flickr 22s linear infinite forwards;
          animation: flickr 22s linear infinite forwards;
  -webkit-animation-delay: 0.1818181818s;
          animation-delay: 0.1818181818s;
}

.star:nth-of-type(23) {
  margin: 1vh 99vw;
  -webkit-animation: flickr 92s linear infinite forwards;
          animation: flickr 92s linear infinite forwards;
  -webkit-animation-delay: 0.0434782609s;
          animation-delay: 0.0434782609s;
}

.star:nth-of-type(24) {
  margin: 3vh 99vw;
  -webkit-animation: flickr 48s linear infinite forwards;
          animation: flickr 48s linear infinite forwards;
  -webkit-animation-delay: 0.2083333333s;
          animation-delay: 0.2083333333s;
}

.star:nth-of-type(25) {
  margin: 1vh 25vw;
  -webkit-animation: flickr 25s linear infinite forwards;
          animation: flickr 25s linear infinite forwards;
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}

.star:nth-of-type(26) {
  margin: 8vh 81vw;
  -webkit-animation: flickr 52s linear infinite forwards;
          animation: flickr 52s linear infinite forwards;
  -webkit-animation-delay: 0.1538461538s;
          animation-delay: 0.1538461538s;
}

.star:nth-of-type(27) {
  margin: 3vh 96vw;
  -webkit-animation: flickr 108s linear infinite forwards;
          animation: flickr 108s linear infinite forwards;
  -webkit-animation-delay: 0.1851851852s;
          animation-delay: 0.1851851852s;
}

.star:nth-of-type(28) {
  margin: 10vh 98vw;
  -webkit-animation: flickr 84s linear infinite forwards;
          animation: flickr 84s linear infinite forwards;
  -webkit-animation-delay: 0.1071428571s;
          animation-delay: 0.1071428571s;
}

.star:nth-of-type(29) {
  margin: 4vh 93vw;
  -webkit-animation: flickr 29s linear infinite forwards;
          animation: flickr 29s linear infinite forwards;
  -webkit-animation-delay: 0.0344827586s;
          animation-delay: 0.0344827586s;
}

.star:nth-of-type(30) {
  margin: 7vh 71vw;
  -webkit-animation: flickr 30s linear infinite forwards;
          animation: flickr 30s linear infinite forwards;
  -webkit-animation-delay: 0.0666666667s;
          animation-delay: 0.0666666667s;
}

.star:nth-of-type(31) {
  margin: 9vh 80vw;
  -webkit-animation: flickr 31s linear infinite forwards;
          animation: flickr 31s linear infinite forwards;
  -webkit-animation-delay: 0.0322580645s;
          animation-delay: 0.0322580645s;
}

.star:nth-of-type(32) {
  margin: 4vh 14vw;
  -webkit-animation: flickr 32s linear infinite forwards;
          animation: flickr 32s linear infinite forwards;
  -webkit-animation-delay: 0.09375s;
          animation-delay: 0.09375s;
}

.star:nth-of-type(33) {
  margin: 10vh 37vw;
  -webkit-animation: flickr 99s linear infinite forwards;
          animation: flickr 99s linear infinite forwards;
  -webkit-animation-delay: 0.0606060606s;
          animation-delay: 0.0606060606s;
}

.star:nth-of-type(34) {
  margin: 1vh 49vw;
  -webkit-animation: flickr 136s linear infinite forwards;
          animation: flickr 136s linear infinite forwards;
  -webkit-animation-delay: 0.0588235294s;
          animation-delay: 0.0588235294s;
}

.star:nth-of-type(35) {
  margin: 10vh 3vw;
  -webkit-animation: flickr 140s linear infinite forwards;
          animation: flickr 140s linear infinite forwards;
  -webkit-animation-delay: 0.0857142857s;
          animation-delay: 0.0857142857s;
}

.star:nth-of-type(36) {
  margin: 1vh 60vw;
  -webkit-animation: flickr 72s linear infinite forwards;
          animation: flickr 72s linear infinite forwards;
  -webkit-animation-delay: 0.0555555556s;
          animation-delay: 0.0555555556s;
}

.star:nth-of-type(37) {
  margin: 5vh 48vw;
  -webkit-animation: flickr 148s linear infinite forwards;
          animation: flickr 148s linear infinite forwards;
  -webkit-animation-delay: 0.0540540541s;
          animation-delay: 0.0540540541s;
}

.star:nth-of-type(38) {
  margin: 9vh 79vw;
  -webkit-animation: flickr 152s linear infinite forwards;
          animation: flickr 152s linear infinite forwards;
  -webkit-animation-delay: 0.0789473684s;
          animation-delay: 0.0789473684s;
}

.star:nth-of-type(39) {
  margin: 9vh 82vw;
  -webkit-animation: flickr 156s linear infinite forwards;
          animation: flickr 156s linear infinite forwards;
  -webkit-animation-delay: 0.0512820513s;
          animation-delay: 0.0512820513s;
}

.star:nth-of-type(40) {
  margin: 7vh 48vw;
  -webkit-animation: flickr 120s linear infinite forwards;
          animation: flickr 120s linear infinite forwards;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.star:nth-of-type(41) {
  margin: 8vh 3vw;
  -webkit-animation: flickr 164s linear infinite forwards;
          animation: flickr 164s linear infinite forwards;
  -webkit-animation-delay: 0.0487804878s;
          animation-delay: 0.0487804878s;
}

.star:nth-of-type(42) {
  margin: 4vh 65vw;
  -webkit-animation: flickr 126s linear infinite forwards;
          animation: flickr 126s linear infinite forwards;
  -webkit-animation-delay: 0.0952380952s;
          animation-delay: 0.0952380952s;
}

.star:nth-of-type(43) {
  margin: 3vh 83vw;
  -webkit-animation: flickr 43s linear infinite forwards;
          animation: flickr 43s linear infinite forwards;
  -webkit-animation-delay: 0.0697674419s;
          animation-delay: 0.0697674419s;
}

.star:nth-of-type(44) {
  margin: 7vh 57vw;
  -webkit-animation: flickr 44s linear infinite forwards;
          animation: flickr 44s linear infinite forwards;
  -webkit-animation-delay: 0.0227272727s;
          animation-delay: 0.0227272727s;
}

.star:nth-of-type(45) {
  margin: 2vh 88vw;
  -webkit-animation: flickr 180s linear infinite forwards;
          animation: flickr 180s linear infinite forwards;
  -webkit-animation-delay: 0.0666666667s;
          animation-delay: 0.0666666667s;
}

.star:nth-of-type(46) {
  margin: 5vh 58vw;
  -webkit-animation: flickr 138s linear infinite forwards;
          animation: flickr 138s linear infinite forwards;
  -webkit-animation-delay: 0.0434782609s;
          animation-delay: 0.0434782609s;
}

.star:nth-of-type(47) {
  margin: 5vh 65vw;
  -webkit-animation: flickr 141s linear infinite forwards;
          animation: flickr 141s linear infinite forwards;
  -webkit-animation-delay: 0.085106383s;
          animation-delay: 0.085106383s;
}

.star:nth-of-type(48) {
  margin: 6vh 34vw;
  -webkit-animation: flickr 48s linear infinite forwards;
          animation: flickr 48s linear infinite forwards;
  -webkit-animation-delay: 0.0625s;
          animation-delay: 0.0625s;
}

.star:nth-of-type(49) {
  margin: 3vh 32vw;
  -webkit-animation: flickr 147s linear infinite forwards;
          animation: flickr 147s linear infinite forwards;
  -webkit-animation-delay: 0.0408163265s;
          animation-delay: 0.0408163265s;
}

.star:nth-of-type(50) {
  margin: 8vh 83vw;
  -webkit-animation: flickr 150s linear infinite forwards;
          animation: flickr 150s linear infinite forwards;
  -webkit-animation-delay: 0.02s;
          animation-delay: 0.02s;
}

@-webkit-keyframes flickr {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-500px);
  }
}

@keyframes flickr {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-500px);
  }
}
@-webkit-keyframes firework {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes firework {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}