@keyframes jelly {
        0%,
        100% {
          transform: scale(1, 1);
        }
        25% {
          transform: scale(0.9, 1.1);
        }
        50% {
          transform: scale(1.1, 0.9);
        }
        75% {
          transform: scale(0.95, 1.05);
        }
      }
      @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.ribbon:after { background-color: #2575fc !important; }
.cold {
  animation: frost 2s ease-in-out infinite alternate;
}

@keyframes frost {
  from {
    text-shadow:
      0 0 0.2em #e0f7fa,
      0 0 0.5em #b2ebf2,
      0 0 0.8em #81d4fa,
      0 0 1em #4dd0e1,
      0 0 1.2em #26c6da;
    color: #e0f7fa;
  }
  50% {
    text-shadow:
      0 0 0.3em #b3e5fc,
      0 0 0.6em #4fc3f7,
      0 0 1em #29b6f6,
      0 0 1.3em #03a9f4;
    color: #ffffff;
  }
  to {
    text-shadow:
      0 0 0.4em #e1f5fe,
      0 0 0.6em #b3e5fc,
      0 0 1em #81d4fa,
      0 0 1.5em #4fc3f7;
    color: #b3e5fc;
  }
}

.snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.snowflakes > div {
  position: absolute;
  top: -2em;
  color: #fff;
  font-size: 1.5em;
  user-select: none;
  animation: fall linear infinite;
  opacity: 0.8;
  animation-duration: 8s;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0.2;
  }
}

.snowflakes > div:nth-child(1) { left: 10%; animation-delay: 0s; }
.snowflakes > div:nth-child(2) { left: 25%; animation-delay: 5s; }
.snowflakes > div:nth-child(3) { left: 40%; animation-delay: 3s; }
.snowflakes > div:nth-child(4) { left: 55%; animation-delay: 2s; }
.snowflakes > div:nth-child(5) { left: 75%; animation-delay: 4s; }
.snowflakes > div:nth-child(6) { left: 90%; animation-delay: 1s; }


.fire {
  animation: burn 1.5s linear infinite alternate;
}

@keyframes burn {
  from { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .4em #ffae34, .2em -.3em .3em #ec760c, -.2em -.4em .4em #cd4606, .1em -.5em .7em #973716, .1em -.7em .7em #451b0e; }
  45%  { text-shadow: .1em -.2em .5em #fefcc9, .15em 0 .4em #feec85, -.1em -.25em .5em #ffae34, .15em -.45em .5em #ec760c, -.1em -.5em .6em #cd4606, 0 -.8em .6em #973716, .2em -1em .8em #451b0e; }
  70%  { text-shadow: -.1em 0 .3em #fefcc9, .1em -.1em .3em #feec85, -.2em -.2em .6em #ffae34, .2em -.3em .4em #ec760c, -.2em -.4em .7em #cd4606, .1em -.5em .7em #973716, .1em -.7em .9em #451b0e; }
  to   { text-shadow: -.1em -.2em .6em #fefcc9, -.15em 0 .6em #feec85, .1em -.25em .6em #ffae34, -.15em -.45em .5em #ec760c, .1em -.5em .6em #cd4606, 0 -.8em .6em #973716, -.2em -1em .8em #451b0e; }
}

@keyframes shakeBg {
  0%,100% { background-position: 50% 50%; }
  25%     { background-position: 53% 50%; }
  50%     { background-position: 47% 50%; }
  75%     { background-position: 53% 50%; }
}

@keyframes scanMove {
  100% { background-position-y: 2px; }
}

@keyframes progress {
  to { width: 100%; }
}