.onboarding-text {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 24px 10px 10px;
  height: fit-content;
  font-size: 15px;
  font-weight: 500;
  pointer-events: all;
}

.cross {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 8px;
  right: 8px;
  rotate: 45deg;
}

.cross::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 2px;
  background-color: #bdbdbd;
}

.cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 14px;
  background-color: #bdbdbd;
}

.finger {
  width: 44px;
  margin: 8px 0;
  animation: jump 3s ease infinite;
}

.direction-bottom.finger {
  rotate: 180deg;
}

.direction-left.finger {
  rotate: -90deg;
}

.direction-right.finger {
  rotate: 90deg;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-8px);
  }
  30% {
    transform: translateY(7px);
  }
  45% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(5px);
  }
  75% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}