@keyframes rainbow-variables {
  0%, 100% {
    --theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);
    --theme-accent-accessible-threshold: 0.5;
    --theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);
    --theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);
    --theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);
    --theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));
    --theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);
    --theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);
  }

  0% {
    --theme-accent-r: 255;
    --theme-accent-g: 0;
    --theme-accent-b: 0;
  }

  16.666666666666668% {
    --theme-accent-r: 255;
    --theme-accent-g: 255;
    --theme-accent-b: 0;
  }

  33.333333333333336% {
    --theme-accent-r: 0;
    --theme-accent-g: 255;
    --theme-accent-b: 0;
  }

  50% {
    --theme-accent-r: 0;
    --theme-accent-g: 255;
    --theme-accent-b: 255;
  }

  66.66666666666667% {
    --theme-accent-r: 0;
    --theme-accent-g: 0;
    --theme-accent-b: 255;
  }

  83.33333333333334% {
    --theme-accent-r: 255;
    --theme-accent-g: 0;
    --theme-accent-b: 255;
  }

  100% {
    --theme-accent-r: 255;
    --theme-accent-g: 0;
    --theme-accent-b: 0;
  }
}

@keyframes rainbow {
  0% {
    background-color: hsl(0, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
  }

  16.666666666666668% {
    background-color: hsl(60, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
  }

  33.333333333333336% {
    background-color: hsl(120, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
  }

  50% {
    background-color: hsl(180, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
  }

  66.66666666666667% {
    background-color: hsl(240, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
  }

  83.33333333333334% {
    background-color: hsl(300, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
  }

  100% {
    background-color: hsl(360, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shake {
  0% {
    transform: translate3d(0, 0, 0);
  }

  10% {
    transform: translate3d(-1.2em, 0, 0);
  }

  20% {
    transform: translate3d(1.2em, 0, 0);
  }

  30% {
    transform: translate3d(-1em, 0, 0);
  }

  40% {
    transform: translate3d(1em, 0, 0);
  }

  50% {
    transform: translate3d(-0.8em, 0, 0);
  }

  60% {
    transform: translate3d(0.8em, 0, 0);
  }

  70% {
    transform: translate3d(-0.3em, 0, 0);
  }

  80% {
    transform: translate3d(0.3em, 0, 0);
  }

  90% {
    transform: translate3d(-0.1em, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

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

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(0.9);
  }

  75% {
    transform: scale(1.1);
  }

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

@keyframes jello {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}