.ticker {
  width: 100%;
  display: flex;
}

.ticker div {
  color: var(--igniteWhite);
  font-size: 3.5em;
  background: black;
  white-space: nowrap;
  font-weight: 900;
  text-transform: uppercase;
  animation: animate 80s linear infinite;
  animation-delay: -80s;
  margin-top: 12px;
}

.ticker div:nth-child(2) {
  animation: animate2 80s linear infinite;
  animation-delay: -40s;
}

@keyframes animate {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes animate2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

.ticker div span {
  color: transparent;
  -webkit-text-stroke-width: 0.03em;
}
.ticker.red div span {
  -webkit-text-stroke-color: var(--igniteRed);
}

.ticker.purple div span {
  -webkit-text-stroke-color: #6441a5;
}
.ticker.orange div span {
  -webkit-text-stroke-color: var(--igniteGold);
}
.ticker.orange div span {
  -webkit-text-stroke-color: darkorange;
}

@media (max-width: 768px) {
  .ticker div {
    color: var(--igniteWhite);
    font-size: 2.4em;
  }
}