@keyframes changingColor {
  3%,
  5% {
    background: var(--a);
  }
  6%,
  8% {
    background: var(--b);
  }
  9%,
  11% {
    background: var(--c);
  }
  12%,
  14% {
    background: var(--d);
  }
  15%,
  17% {
    background: var(--e);
  }
  18%,
  20% {
    background: var(--f);
  }
  21%,
  23% {
    background: var(--f);
  }
  24%,
  26% {
    background: var(--g);
  }
  27%,
  29% {
    background: var(--h);
  }
  30%,
  32% {
    background: var(--i);
  }
  33%,
  35% {
    background: var(--j);
  }
  36%,
  38% {
    background: var(--k);
  }
  39%,
  41% {
    background: var(--l);
  }
  42%,
  44% {
    background: var(--m);
  }
  45%,
  47% {
    background: var(--n);
  }
  48%,
  50% {
    background: var(--o);
  }
  51%,
  53% {
    background: var(--p);
  }
  54%,
  56% {
    background: var(--q);
  }
  57%,
  59% {
    background: var(--r);
  }
  60%,
  62% {
    background: var(--s);
  }
  63%,
  65% {
    background: var(--t);
  }
  66%,
  68% {
    background: var(--u);
  }
  69%,
  71% {
    background: var(--v);
  }
  72%,
  74% {
    background: var(--w);
  }
  75%,
  77% {
    background: var(--x);
  }
  78%,
  80% {
    background: var(--y);
  }
  81%,
  83% {
    background: var(--z);
  }
  84%,
  86% {
    background: var(--aa);
  }
  87%,
  89% {
    background: var(--ab);
  }
  90%,
  92% {
    background: var(--ad);
  }
  93%,
  95% {
    background: var(--ae);
  }
  96%,
  98% {
    background: var(--af);
  }
  99%,
  100% {
    background: var(--ac);
  }
}

@keyframes slideSlime1 {
  0% {
    transform: translatex(-230px);
  }
  50% {
    transform: translatex(500px);
  }
  100% {
    transform: translatex(-230px);
  }
}
@keyframes slideSlime2 {
  0% {
    transform: translatex(300px) translatey(-1em);
  }
  50% {
    transform: translatex(-250px) translatey(2em);
  }
  100% {
    transform: translatex(300px) translatey(-1em);
  }
}
@keyframes slideSlime3 {
  0% {
    filter: contrast(0.6);
    transform: translatex(-150px);
  }
  50% {
    filter: contrast(0.8);
    transform: translatex(0);
  }
  100% {
    filter: contrast(0.6);
    transform: translatex(-150px);
  }
}

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

@keyframes slideupToast {
  0% {
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 5em;
  }
  85% {
    opacity: 1;
    bottom: 5em;
  }
  100% {
    opacity: 0;
    display: none;
    bottom: 0;
  }
}

@keyframes speed {
  from {
    transform: translatex(-10em);
  }
  to {
    transform: translatex(60em);
  }
}