.zoom2 {
  animation-name: zoomInOut;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.zoom-out-drop {
  animation-name: zoomOutDrop;
  animation-duration: .2s;
  animation-timing-function: ease-in-out;
}

.delay-1 {
  animation-delay: .5s;
}

.delay-2 {
  animation-delay: 1s;
}

.delay-3 {
  animation-delay: 1.5s;
}

.delay-4 {
  animation-delay: 2s;
}

.delay-5 {
  animation-delay: 2.5s;
}

@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1.05);
  }
}

@keyframes zoomOutDrop {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }

  70% {
    transform: scale(1);
  }

  95% {
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.floating-to-l {
  animation-name: floatingToL;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.floating-to-r {
  animation-name: floatingToR;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.floating {
  animation-name: floating;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.floating-2 {
  animation-name: floating;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.floating-3 {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floatingToL {
  0% {
    transform: translate(0, 0);
    filter: blur(2px);
  }

  50% {
    transform: translate(15px, -15px);
    filter: blur(0px);
  }

  100% {
    filter: blur(2px);
    transform: translate(0, 0)
  }
}

@keyframes floatingToR {
  0% {
    transform: translate(0, 0);
    filter: blur(2px);
  }

  50% {
    transform: translate(-15px, -15px);
    filter: blur(0);
  }

  100% {
    filter: blur(2px);
    transform: translate(0, 0)
  }
}

@keyframes floating {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(0, 5px)
  }

  100% {
    transform: translate(0, 0)
  }
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
}

@keyframes flash {

  0%,
  50%,
  to {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

.animate__flash {
  animation-name: flash;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  animation-duration: .5s;
}

@keyframes shakeY {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  20% {
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0)
  }

  50%,
  70% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0)
  }

  40%,
  60% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0)
  }
}

.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#lightning {
  width: 100px;
  height: 200px;
  background-color: yellow;
  /* Change color as needed */
  position: relative;
}

.fadeOut {
  animation: fadeOutAnimation .5s linear infinite;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.strike {
  animation: strikeAnimation .2s linear;
}

@keyframes strikeAnimation {
  0% {
    opacity: .1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}

.zoom-in {
  animation-timing-function: cubic-bezier(0, 0.89, 0.17, 1);
  animation-name: zoomIn;
  animation-duration: 15s;
}