/*FIREWORKS*/

  @keyframes firework-rocket-animation {
          0% {
                  background-color: #000;
          }

          25% {
                  background-color: rgb(216, 204, 39);
          }

          100% {
                  background-color: #000;
          }
  }

  @-webkit-keyframes firework-rocket-animation {
          0% {
                  background-color: #000;
          }

          25% {
                  background-color: rgb(216, 204, 39);
          }

          100% {
                  background-color: #000;
          }
  }

  @keyframes firework-animation {
          0% {
                  background-color: #ced9ed;
          }

          20% {
                  background-color: #cfc7fa;
          }

          40% {
                  background-color: #e2c6ee;
          }

          60% {
                  background-color: #efc8dd;
          }

          80% {
                  background-color: #d7e9db;
          }

          100% {
                  background-color: #ced9ed;
          }
  }

  @-webkit-keyframes firework-animation {
          0% {
                  background-color: #ced9ed;
          }

          20% {
                  background-color: #cfc7fa;
          }

          40% {
                  background-color: #e2c6ee;
          }

          60% {
                  background-color: #efc8dd;
          }

          80% {
                  background-color: #d7e9db;
          }

          100% {
                  background-color: #ced9ed;
          }
  }

  #frwkToggle {
          position: absolute;
          right: 2vw;
          bottom: -2%;
          width: 50px;
          height: auto;
          background-color: transparent;
          border: none;
  }

  #frwkToggle img {
          width: 100%;
          height: 100%;
          image-rendering: pixelated;
          image-rendering: -moz-crisp-edges;
          image-rendering: crisp-edges;
  }

  #theSky {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
  }

  .fireworkRocket {
          z-index: 999;
          position: absolute;
          height: 10px;
          width: 10px;
          border-radius: 10px;
          animation-name: firework-rocket-animation;
          animation-timing-function: linear;
          animation-duration: 1s;
          animation-iteration-count: infinite;
  }

  .firework {
          z-index: 999;
          position: absolute;
          height: 10px;
          width: 10px;
          border-radius: 10px;
          animation-name: firework-animation;
          animation-timing-function: linear;
          animation-duration: 1s;
          animation-iteration-count: infinite;
  }