html {
  height: 100vh;
  display: grid;
  place-content: center;
  background: black;
  text-align: center;
  color: white;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

svg {
  fill: white;
  height: 125px;
  margin-top: -10px;
}

.popper {
  fill: red;
  -webkit-animation: popper-appear 1s infinite;
          animation: popper-appear 1s infinite;
}

.confetti {
  fill: #2334ff;
  -webkit-animation: confetti-appear 1s infinite;
          animation: confetti-appear 1s infinite;
}

.pop {
  fill: #4bff4b;
  -webkit-animation: pop-appear 1s infinite;
          animation: pop-appear 1s infinite;
}

p {
  font-family: 'Pacifico', cursive;
  font-size: 29px;
  margin: 20px 0 0 0;
  text-shadow: 0 0 12px orange;
  color: orange;
}

span {
  -webkit-animation: flicker-in 3s infinite backwards;
          animation: flicker-in 3s infinite backwards;
}

span:nth-of-type(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

span:nth-of-type(3) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

@-webkit-keyframes popper-appear {
  0%, 33.33% {
    opacity: 1;
  }
  33.99%, to {
    opacity: .1;
  }
}

@keyframes popper-appear {
  0%, 33.33% {
    opacity: 1;
  }
  33.99%, to {
    opacity: .1;
  }
}

@-webkit-keyframes confetti-appear {
  0%, 33.33%, 66.99%, to {
    opacity: .3;
  }
  33.99%, 66.66% {
    opacity: 1;
  }
}

@keyframes confetti-appear {
  0%, 33.33%, 66.99%, to {
    opacity: .3;
  }
  33.99%, 66.66% {
    opacity: 1;
  }
}

@-webkit-keyframes pop-appear {
  0%, 66.66% {
    opacity: .1;
  }
  66.99%, to {
    opacity: 1;
  }
}

@keyframes pop-appear {
  0%, 66.66% {
    opacity: .1;
  }
  66.99%, to {
    opacity: 1;
  }
}

@-webkit-keyframes flicker-in {
  0%, 64% {
    opacity: .1;
  }
  66% {
    opacity: .7;
  }
  66.66%, to {
    opacity: 1;
  }
}

@keyframes flicker-in {
  0%, 64% {
    opacity: .1;
  }
  66% {
    opacity: .7;
  }
  66.66%, to {
    opacity: 1;
  }
}