.darkMode {
  --bg: black;
  --txt: #b9b9b9;
  --red: #ff4e6e;
  --blue: #4595eb;
  --loading-bg: #cfcfcf52;
  --loading-bg-static: #7c727238;
}

.liteMode {
  --bg: #fafafa;
  --txt: #4e5255;
  --red: red;
  --blue: #0244be;
  --loading-bg: #4e52553f;
  --loading-bg-static: #959fa71c;
}

.animate-loading {
  -webkit-animation: shimmer 2s infinite linear;
          animation: shimmer 2s infinite linear;
  background: -webkit-gradient(linear, left top, right top, color-stop(4%, var(--loading-bg-static)), color-stop(25%, var(--loading-bg)), color-stop(36%, var(--loading-bg-static)));
  background: linear-gradient(to right, var(--loading-bg-static) 4%, var(--loading-bg) 25%, var(--loading-bg-static) 36%);
  background-size: 1000px 100%;
  border-radius: 5px;
}

@-webkit-keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.glitch {
  color: var(--txt);
  position: relative;
}

@-webkit-keyframes noise-anim {
  0% {
    -webkit-clip-path: inset(2% 0 17% 0);
            clip-path: inset(2% 0 17% 0);
  }
  5% {
    -webkit-clip-path: inset(91% 0 7% 0);
            clip-path: inset(91% 0 7% 0);
  }
  10% {
    -webkit-clip-path: inset(5% 0 61% 0);
            clip-path: inset(5% 0 61% 0);
  }
  15% {
    -webkit-clip-path: inset(57% 0 5% 0);
            clip-path: inset(57% 0 5% 0);
  }
  20% {
    -webkit-clip-path: inset(30% 0 23% 0);
            clip-path: inset(30% 0 23% 0);
  }
  25% {
    -webkit-clip-path: inset(82% 0 13% 0);
            clip-path: inset(82% 0 13% 0);
  }
  30% {
    -webkit-clip-path: inset(44% 0 14% 0);
            clip-path: inset(44% 0 14% 0);
  }
  35% {
    -webkit-clip-path: inset(83% 0 1% 0);
            clip-path: inset(83% 0 1% 0);
  }
  40% {
    -webkit-clip-path: inset(98% 0 2% 0);
            clip-path: inset(98% 0 2% 0);
  }
  45% {
    -webkit-clip-path: inset(41% 0 20% 0);
            clip-path: inset(41% 0 20% 0);
  }
  50% {
    -webkit-clip-path: inset(4% 0 82% 0);
            clip-path: inset(4% 0 82% 0);
  }
  55% {
    -webkit-clip-path: inset(60% 0 17% 0);
            clip-path: inset(60% 0 17% 0);
  }
  60% {
    -webkit-clip-path: inset(53% 0 17% 0);
            clip-path: inset(53% 0 17% 0);
  }
  65% {
    -webkit-clip-path: inset(85% 0 14% 0);
            clip-path: inset(85% 0 14% 0);
  }
  70% {
    -webkit-clip-path: inset(91% 0 3% 0);
            clip-path: inset(91% 0 3% 0);
  }
  75% {
    -webkit-clip-path: inset(17% 0 7% 0);
            clip-path: inset(17% 0 7% 0);
  }
  80% {
    -webkit-clip-path: inset(44% 0 18% 0);
            clip-path: inset(44% 0 18% 0);
  }
  85% {
    -webkit-clip-path: inset(20% 0 54% 0);
            clip-path: inset(20% 0 54% 0);
  }
  90% {
    -webkit-clip-path: inset(26% 0 8% 0);
            clip-path: inset(26% 0 8% 0);
  }
  95% {
    -webkit-clip-path: inset(94% 0 5% 0);
            clip-path: inset(94% 0 5% 0);
  }
  100% {
    -webkit-clip-path: inset(4% 0 38% 0);
            clip-path: inset(4% 0 38% 0);
  }
}

@keyframes noise-anim {
  0% {
    -webkit-clip-path: inset(2% 0 17% 0);
            clip-path: inset(2% 0 17% 0);
  }
  5% {
    -webkit-clip-path: inset(91% 0 7% 0);
            clip-path: inset(91% 0 7% 0);
  }
  10% {
    -webkit-clip-path: inset(5% 0 61% 0);
            clip-path: inset(5% 0 61% 0);
  }
  15% {
    -webkit-clip-path: inset(57% 0 5% 0);
            clip-path: inset(57% 0 5% 0);
  }
  20% {
    -webkit-clip-path: inset(30% 0 23% 0);
            clip-path: inset(30% 0 23% 0);
  }
  25% {
    -webkit-clip-path: inset(82% 0 13% 0);
            clip-path: inset(82% 0 13% 0);
  }
  30% {
    -webkit-clip-path: inset(44% 0 14% 0);
            clip-path: inset(44% 0 14% 0);
  }
  35% {
    -webkit-clip-path: inset(83% 0 1% 0);
            clip-path: inset(83% 0 1% 0);
  }
  40% {
    -webkit-clip-path: inset(98% 0 2% 0);
            clip-path: inset(98% 0 2% 0);
  }
  45% {
    -webkit-clip-path: inset(41% 0 20% 0);
            clip-path: inset(41% 0 20% 0);
  }
  50% {
    -webkit-clip-path: inset(4% 0 82% 0);
            clip-path: inset(4% 0 82% 0);
  }
  55% {
    -webkit-clip-path: inset(60% 0 17% 0);
            clip-path: inset(60% 0 17% 0);
  }
  60% {
    -webkit-clip-path: inset(53% 0 17% 0);
            clip-path: inset(53% 0 17% 0);
  }
  65% {
    -webkit-clip-path: inset(85% 0 14% 0);
            clip-path: inset(85% 0 14% 0);
  }
  70% {
    -webkit-clip-path: inset(91% 0 3% 0);
            clip-path: inset(91% 0 3% 0);
  }
  75% {
    -webkit-clip-path: inset(17% 0 7% 0);
            clip-path: inset(17% 0 7% 0);
  }
  80% {
    -webkit-clip-path: inset(44% 0 18% 0);
            clip-path: inset(44% 0 18% 0);
  }
  85% {
    -webkit-clip-path: inset(20% 0 54% 0);
            clip-path: inset(20% 0 54% 0);
  }
  90% {
    -webkit-clip-path: inset(26% 0 8% 0);
            clip-path: inset(26% 0 8% 0);
  }
  95% {
    -webkit-clip-path: inset(94% 0 5% 0);
            clip-path: inset(94% 0 5% 0);
  }
  100% {
    -webkit-clip-path: inset(4% 0 38% 0);
            clip-path: inset(4% 0 38% 0);
  }
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 var(--red);
  top: 0;
  color: var(--txt);
  background: var(--bg);
  overflow: hidden;
  animation: noise-anim 5s infinite linear alternate-reverse;
}

@-webkit-keyframes noise-anim-2 {
  0% {
    -webkit-clip-path: inset(67% 0 12% 0);
            clip-path: inset(67% 0 12% 0);
  }
  5% {
    -webkit-clip-path: inset(9% 0 1% 0);
            clip-path: inset(9% 0 1% 0);
  }
  10% {
    -webkit-clip-path: inset(68% 0 12% 0);
            clip-path: inset(68% 0 12% 0);
  }
  15% {
    -webkit-clip-path: inset(54% 0 28% 0);
            clip-path: inset(54% 0 28% 0);
  }
  20% {
    -webkit-clip-path: inset(31% 0 65% 0);
            clip-path: inset(31% 0 65% 0);
  }
  25% {
    -webkit-clip-path: inset(47% 0 51% 0);
            clip-path: inset(47% 0 51% 0);
  }
  30% {
    -webkit-clip-path: inset(92% 0 7% 0);
            clip-path: inset(92% 0 7% 0);
  }
  35% {
    -webkit-clip-path: inset(72% 0 20% 0);
            clip-path: inset(72% 0 20% 0);
  }
  40% {
    -webkit-clip-path: inset(56% 0 6% 0);
            clip-path: inset(56% 0 6% 0);
  }
  45% {
    -webkit-clip-path: inset(30% 0 8% 0);
            clip-path: inset(30% 0 8% 0);
  }
  50% {
    -webkit-clip-path: inset(57% 0 15% 0);
            clip-path: inset(57% 0 15% 0);
  }
  55% {
    -webkit-clip-path: inset(99% 0 2% 0);
            clip-path: inset(99% 0 2% 0);
  }
  60% {
    -webkit-clip-path: inset(27% 0 71% 0);
            clip-path: inset(27% 0 71% 0);
  }
  65% {
    -webkit-clip-path: inset(38% 0 12% 0);
            clip-path: inset(38% 0 12% 0);
  }
  70% {
    -webkit-clip-path: inset(34% 0 43% 0);
            clip-path: inset(34% 0 43% 0);
  }
  75% {
    -webkit-clip-path: inset(74% 0 24% 0);
            clip-path: inset(74% 0 24% 0);
  }
  80% {
    -webkit-clip-path: inset(33% 0 12% 0);
            clip-path: inset(33% 0 12% 0);
  }
  85% {
    -webkit-clip-path: inset(74% 0 13% 0);
            clip-path: inset(74% 0 13% 0);
  }
  90% {
    -webkit-clip-path: inset(54% 0 31% 0);
            clip-path: inset(54% 0 31% 0);
  }
  95% {
    -webkit-clip-path: inset(83% 0 14% 0);
            clip-path: inset(83% 0 14% 0);
  }
  100% {
    -webkit-clip-path: inset(48% 0 49% 0);
            clip-path: inset(48% 0 49% 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    -webkit-clip-path: inset(67% 0 12% 0);
            clip-path: inset(67% 0 12% 0);
  }
  5% {
    -webkit-clip-path: inset(9% 0 1% 0);
            clip-path: inset(9% 0 1% 0);
  }
  10% {
    -webkit-clip-path: inset(68% 0 12% 0);
            clip-path: inset(68% 0 12% 0);
  }
  15% {
    -webkit-clip-path: inset(54% 0 28% 0);
            clip-path: inset(54% 0 28% 0);
  }
  20% {
    -webkit-clip-path: inset(31% 0 65% 0);
            clip-path: inset(31% 0 65% 0);
  }
  25% {
    -webkit-clip-path: inset(47% 0 51% 0);
            clip-path: inset(47% 0 51% 0);
  }
  30% {
    -webkit-clip-path: inset(92% 0 7% 0);
            clip-path: inset(92% 0 7% 0);
  }
  35% {
    -webkit-clip-path: inset(72% 0 20% 0);
            clip-path: inset(72% 0 20% 0);
  }
  40% {
    -webkit-clip-path: inset(56% 0 6% 0);
            clip-path: inset(56% 0 6% 0);
  }
  45% {
    -webkit-clip-path: inset(30% 0 8% 0);
            clip-path: inset(30% 0 8% 0);
  }
  50% {
    -webkit-clip-path: inset(57% 0 15% 0);
            clip-path: inset(57% 0 15% 0);
  }
  55% {
    -webkit-clip-path: inset(99% 0 2% 0);
            clip-path: inset(99% 0 2% 0);
  }
  60% {
    -webkit-clip-path: inset(27% 0 71% 0);
            clip-path: inset(27% 0 71% 0);
  }
  65% {
    -webkit-clip-path: inset(38% 0 12% 0);
            clip-path: inset(38% 0 12% 0);
  }
  70% {
    -webkit-clip-path: inset(34% 0 43% 0);
            clip-path: inset(34% 0 43% 0);
  }
  75% {
    -webkit-clip-path: inset(74% 0 24% 0);
            clip-path: inset(74% 0 24% 0);
  }
  80% {
    -webkit-clip-path: inset(33% 0 12% 0);
            clip-path: inset(33% 0 12% 0);
  }
  85% {
    -webkit-clip-path: inset(74% 0 13% 0);
            clip-path: inset(74% 0 13% 0);
  }
  90% {
    -webkit-clip-path: inset(54% 0 31% 0);
            clip-path: inset(54% 0 31% 0);
  }
  95% {
    -webkit-clip-path: inset(83% 0 14% 0);
            clip-path: inset(83% 0 14% 0);
  }
  100% {
    -webkit-clip-path: inset(48% 0 49% 0);
            clip-path: inset(48% 0 49% 0);
  }
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 var(--blue);
  top: 0;
  color: var(--txt);
  background: var(--bg);
  overflow: hidden;
  animation: noise-anim-2 15s infinite linear alternate-reverse;
}

.blinking {
  -webkit-animation: blinkingText 1.2s infinite;
          animation: blinkingText 1.2s infinite;
}

@-webkit-keyframes blinkingText {
  0% {
    color: var(--txt);
  }
  49% {
    color: var(--txt);
  }
  60% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: var(--txt);
  }
}

@keyframes blinkingText {
  0% {
    color: var(--txt);
  }
  49% {
    color: var(--txt);
  }
  60% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: var(--txt);
  }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
.fade-in {
  -webkit-animation: fade-in 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
.slide-in-bottom {
  -webkit-animation: slide-in-bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
.fade-out {
  -webkit-animation: fade-out 0.1s ease-out both;
  animation: fade-out 0.1s ease-out both;
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-bottom
 * ----------------------------------------
 */
.slide-out-bottom {
  -webkit-animation: slide-out-bottom 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: slide-out-bottom 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
}

@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
.fade-in-bottom {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
/*# sourceMappingURL=animations.css.map */