.vertical-marquee-wrapper {
  height: 100%;
  width: 80px;
  overflow: hidden;
}
.vertical-marquee-wrapper .vertical-marquee-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.vertical-marquee-wrapper .vertical-marquee-viewport .vertical-marquee-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: scroll;
}
.vertical-marquee-wrapper .vertical-marquee-item {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 20px;
  text-align: center;
  padding: 0;
  margin: 0;
  color: var(--topppa-vertical-marquee-text-color, inherit);
  background: var(--topppa-vertical-marquee-gradient, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: 1em;
}
@supports not (-webkit-background-clip: text) {
  .vertical-marquee-wrapper .vertical-marquee-item {
    color: var(--topppa-vertical-marquee-text-color, inherit);
    background: transparent;
  }
}
.vertical-marquee-wrapper.has-gradient .vertical-marquee-item {
  background: var(--topppa-vertical-marquee-gradient, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vertical-marquee-wrapper:hover .vertical-marquee-track {
  animation-play-state: paused;
}

.vertical-marquee-wrapper:hover .vertical-marquee-track {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-1 * var(--distance)));
  }
}