@keyframes draw {
  from {
    transform: rotate(23deg);
    margin-top: -120vh;
  }

  to {
    transform: rotate(0deg);
    margin-top: 0vh;
  }
}

@keyframes discard {
  from {
    transform: rotate(0);
    margin-top: 0;
  }

  to {
    transform: rotate(-23deg);
    margin-top: -120vh;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes disappear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes appear-from-bottom {
  from {
    margin-top: 100vh;
  }

  to {
    margin-top: 0;
  }
}

@keyframes color-appearing {
  from {
    text-shadow: #ff95f9 1px 1px 2px, #ff95f9 -1px 1px 2px, #ff95f9 1px -1px 2px, #ff95f9 -1px -1px 2px;
    color: #ff95f9;
    opacity: 0;
  }

  to {
    text-shadow: none;
    color: #5a5d6e;
    opacity: 1;
  }
}

@keyframes appear-from-top {
  from {
    margin-top: -40vh;
    opacity: 0;
    transform: rotate(10deg);
  }

  to {
    margin-top: 0;
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes disappear-from-bottom {
  from {
    margin-top: 0;
    opacity: 1;
    transform: rotate(0deg);
  }

  to {
    margin-top: 40vh;
    opacity: 0;
    transform: rotate(-10deg);
  }
}

@keyframes appear-next-card-button {
  from {
    right: 10vh;
    opacity: 0;
    transform: rotate(1deg);
  }

  to {
    right: 0;
    opacity: 1;
    transform: rotate(0deg);
  }
}