.gradient {
  background-image: linear-gradient(45deg,
      hsl(240deg 100% 20%) 0%,
      hsl(293deg 100% 21%) 13%,
      hsl(319deg 100% 30%) 25%,
      hsl(332deg 100% 39%) 37%,
      hsl(346deg 83% 51%) 50%,
      hsl(10deg 100% 60%) 63%,
      hsl(30deg 100% 55%) 75%,
      hsl(44deg 100% 50%) 87%,
      hsl(55deg 100% 50%) 100%);
}

.glass {
    background: rgba(255, 255, 255, 0);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.115);
}

/* Animations */
.slideUp {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.slideDown {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;  
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

.slideLeft {
  -webkit-animation-name: slideLeft;
  animation-name: slideLeft;
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes slideLeft {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes tdFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 0;
  }
}
@-webkit-keyframes float {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }

  50% {
    transform: translateY(100px) scale(1.2);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }

  50% {
    transform: translateY(100px) scale(1.2);
  }
}

/* Flowing Background Gradient  */
@keyframes flowGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@-webkit-keyframes rotate {
  0% {
      transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes float-rotate {
  0%,
  100% {
    transform: translateY(0px);
  }

  33% {
    transform: translateY(10px);
  }

  50% {
    transform: translateY(0px);
  }

  66% {
    transform: translateY(10px) rotateY(360deg);
  }
}

@keyframes float-rotate {
  0%,
  100% {
    transform: translateY(0px);
  }
  33% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0px);
  }
  66% {
    transform: translateY(10px) rotateY(360deg);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}