* {
  box-sizing: border-box;
}
body {
  background: #C4E4FF;
  background: radial-gradient(circle, hsl(223, 20%,12%), hsl(223, 20%,22%));
  overflow: hidden;
  height: 100vh;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 0;
  margin: 0;
}

.confetti {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: absolute;
  top: -1rem;
  left: 0;
  z-index: 150;
}
.confetti .rotate {
  -webkit-animation: driftyRotate 1s infinite both ease-in-out;
          animation: driftyRotate 1s infinite both ease-in-out;
  -webkit-perspective: 1000;
          perspective: 1000;
}
.confetti .askew {
  background: -webkit-gradient(
  linear,
  left top, left bottom,
  from(var(--grad-direction, to bottom)),
  color-stop(25%, hsl(63, 100%, 50%)),
  color-stop(0%, hsl(23, 100%, 50%)),
  color-stop(0%, hsl(43, 100%, 100%)));
  background: linear-gradient(
  var(--grad-direction, to bottom),
  hsl(63, 100%, 50%) 25%,
  hsl(23, 100%, 50%) 0% 66.667%,
  hsl(43, 100%, 100%) 0% 100%);
  -webkit-transform: skewY(10deg);
          transform: skewY(10deg);
  width: 2rem;
  height: 3.2rem;
  -webkit-animation: drifty 1s infinite alternate both ease-in-out;
          animation: drifty 1s infinite alternate both ease-in-out;
  -webkit-perspective:1000;
          perspective:1000;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}


.confetti:nth-of-type(7n) .askew {
  -webkit-animation-delay: -.6s;
          animation-delay: -.6s;
  -webkit-animation-duration: 2.25s;
          animation-duration: 2.25s;
}
.confetti:nth-of-type(7n + 1) .askew {
  -webkit-animation-delay: -.879s;
          animation-delay: -.879s;
  -webkit-animation-duration: 3.5s;
          animation-duration: 3.5s;
}
.confetti:nth-of-type(7n + 2) .askew {
  -webkit-animation-delay: -.11s;
          animation-delay: -.11s;
  -webkit-animation-duration: 1.95s;
          animation-duration: 1.95s;
}
.confetti:nth-of-type(7n + 3) .askew {
  -webkit-animation-delay: -.246s;
          animation-delay: -.246s;
  -webkit-animation-duration: .85s;
          animation-duration: .85s;
}
.confetti:nth-of-type(7n + 4) .askew {
  -webkit-animation-delay: -.43s;
          animation-delay: -.43s;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}
.confetti:nth-of-type(7n + 5) .askew {
  -webkit-animation-delay: -.56s;
          animation-delay: -.56s;
  -webkit-animation-duration: 1.75s;
          animation-duration: 1.75s;
}
.confetti:nth-of-type(7n + 6) .askew {
  -webkit-animation-delay: -.76s;
          animation-delay: -.76s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}
  
.confetti:nth-of-type(9n) .rotate {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.confetti:nth-of-type(9n + 1) .rotate {
  -webkit-animation-duration: 2.3s;
          animation-duration: 2.3s;
}
.confetti:nth-of-type(9n + 2) .rotate {
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
}
.confetti:nth-of-type(9n + 3) .rotate {
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}
.confetti:nth-of-type(9n + 4) .rotate {
  -webkit-animation-duration: 4.3s;
          animation-duration: 4.3s;
}
.confetti:nth-of-type(9n + 5) .rotate {
  -webkit-animation-duration: 3.05s;
          animation-duration: 3.05s;
}
.confetti:nth-of-type(9n + 6) .rotate {
  -webkit-animation-duration: 2.76s;
          animation-duration: 2.76s;
}
.confetti:nth-of-type(9n + 7) .rotate {
  -webkit-animation-duration: 7.6s;
          animation-duration: 7.6s;
}
.confetti:nth-of-type(9n + 8) .rotate {
  -webkit-animation-duration: 1.78s;
          animation-duration: 1.78s;
}

@-webkit-keyframes drifty {
  0% {
    -webkit-transform: skewY(10deg) translate3d(-250%, 0, 0);
            transform: skewY(10deg) translate3d(-250%, 0, 0);
  }
  100% {
    -webkit-transform: skewY(-12deg) translate3d(250%, 0, 0);
            transform: skewY(-12deg) translate3d(250%, 0, 0);
  }
}

@keyframes drifty {
  0% {
    -webkit-transform: skewY(10deg) translate3d(-250%, 0, 0);
            transform: skewY(10deg) translate3d(-250%, 0, 0);
  }
  100% {
    -webkit-transform: skewY(-12deg) translate3d(250%, 0, 0);
            transform: skewY(-12deg) translate3d(250%, 0, 0);
  }
}
@-webkit-keyframes driftyRotate {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(359deg);
            transform: rotateX(359deg);
  }
}
@keyframes driftyRotate {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(359deg);
            transform: rotateX(359deg);
  }
}