.ticker-tape-container {
  position: fixed;
  width: 100%;
  overflow: hidden;
  height: 2rem;
  background-color: rgba(182, 0, 109, 0.5);
  padding-left: 100%;
  box-sizing: content-box;
  padding: 0rem;
  display: flex;
}

.ticker-top{
  top: 0px;
}

.ticker-bottom{
  bottom: 0px;
}

.ticker-styling span {
  padding: 0.25rem 1rem;
  color: rgba(255, 255, 255,0.8);
}

.ticker-tape {
  --direction: normal;
  --duration: 5s;
  --delay: 0s;
  --iteration-count: infinite;
  --play: running;
  display: flex;
  gap: 0.5rem;
  margin-right: 1rem;
  flex: 0 0 auto;
  align-items: center;
  animation: marquee var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}