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

  100% {
    opacity: 100%;
  }
}

@keyframes animateBgUnblur {
  0% {
    opacity: 100%;
  }

  100% {
    opacity: 0;
  }
}

@keyframes toast-fly-in-out {
  0% {
    transform: translate(300%, -50%);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100% {
    transform: translate(300%, -50%);
    opacity: 0;
  }
}

@keyframes hide {
  0% {
    opacity: 0;
  }
  25% {
    z-index: 0;
  }
  100% {
    z-index: 0;
  }
}

@keyframes slide-up {
  from {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%) translateY(-50%);
  }
  to {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%) translateY(-50%);
  }
}

@keyframes backgroundFade {
  0% {
    background-color: #f6f7f8;
  }
}

/* @keyframes easein {
  0% {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  50% {
    top: 0;
    left: 0;
    transform: translate(0, 0);
  }

  100% {
    position: relative;
  }
} */

@keyframes fadeGreeting {
  0% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}