.slide-down {
  opacity: 1;
  animation: slide-down forwards 0.5s;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0rem);
  }
}
.slide-right {
  opacity: 1;
  animation: slide-right forwards 0.5s;
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(-20rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0rem);
  }
}

.fade-in {
  animation: fade-in 0.5s;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes done-gone {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.auto-scroll {
  transition: margin 2s;
}