@keyframes smoothscroll {
  0% {
    transform: translateY(0);
  }

  100% {
   transform: translateY(-20rem);
  }
}

.scrollAnimation {
  padding: 3px 0;
  animation: smoothscroll 30s linear infinite;
}


/* From Uiverse.io by vamsidevendrakumar */
.card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.cardInner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.999s;
}

.card:hover .cardInner {
  transform: rotateY(180deg);
}

.cardFront,
.cardBack {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.cardFront {
  background-color: #6A2C70;
  color: #fff;
  display: flex;
  align-items: center;
  border: 10px solid #6A2C70;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(0deg);
}

.cardBack {
  background-color: #F08A5D;
  color: #fff;
  display: flex;
  align-items: center;
  border: 10px solid #F08A5D;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(180deg);
}

.packetWrapper {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  animation: down 8s linear infinite;
  font-size: 0;
}

.packet{
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 3s ease;
  transform: rotate(0);
}

@keyframes down {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }
}
