.ticker {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  color: #fff5e8;
  background: #211714;
  border-top: 3px solid #ff7b22;
  border-bottom: 3px solid #ff7b22;
  box-shadow: 0 5px 0 #7d4b38;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
}

.ticker::before,
.ticker::after {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: #ff7b22;
  content: '';
  transform: translateY(-50%);
  box-shadow: 5px 5px 0 #f4c5a1;
}

.ticker::before { left: 12px; }
.ticker::after { right: 12px; }

.ticker span {
  display: inline-block;
  min-width: max-content;
  padding-left: 100%;
  color: #fff5e8;
  text-shadow: 2px 2px 0 #7d4b38;
  animation: pixel-marquee 27s linear infinite;
}

.ticker:hover span {
  animation-play-state: paused;
}

@keyframes pixel-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (max-width: 800px) {
  .ticker {
    padding: 13px 0;
    font-size: 12px;
  }

  .ticker:hover span,
  .ticker:active span {
    animation-play-state: running;
  }
}