body {
  margin: 0;
  padding: 0;
}

.snake-text {
  font-family: 'Bodoni Moda';
  font-size: 96px;
  color: #000;
  background-color: #f1d100;
  display: block;
  margin: 0;
  padding: 0;
}

.marquee {
  position: relative;
  width: 100vw;
  height: 116px; 
  overflow-x: hidden;
}

.track, .track1, .track2, .track3, .track4, .track5, .track6 {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 50s linear infinite;
}

.track span, .track1 span, .track2 span, .track3 span, .track4 span, .track5 span, .track6 span {
  display: inline-block;
  font-variation-settings: 'wght' 800;
  animation: wtt 1s linear 1s infinite alternate;
}

.track span:nth-child(1) {
  animation-delay: 0s;
}

.track span:nth-child(2) {
  animation-delay: 250ms;
}

.track span:nth-child(3) {
  animation-delay: 500ms;
}

.track span:nth-child(4) {
  animation-delay: 750ms;
}

.track span:nth-child(5) {
  animation-delay: 1000ms;
}

.track span:nth-child(6) {
  animation-delay: 1250ms;
}

.track span:nth-child(7) {
  animation-delay: 1500ms;
}

.track span:nth-child(8) {
  animation-delay: 1750ms;
}

.track1 span:nth-child(1) {
  animation-delay: 1.25s;
}

.track1 span:nth-child(2) {
  animation-delay: 1.5s;
}

.track1 span:nth-child(3) {
  animation-delay: 1.75s;
}

.track1 span:nth-child(4) {
  animation-delay: 2s;
}

.track1 span:nth-child(5) {
  animation-delay: 2.25s;
}

.track1 span:nth-child(6) {
  animation-delay: 2.5s;
}

.track1 span:nth-child(7) {
  animation-delay: 2.75s;
}

.track1 span:nth-child(8) {
  animation-delay: 3s;
}

.track2 span:nth-child(1) {
  animation-delay: 1.5s;
}

.track2 span:nth-child(2) {
  animation-delay: 1.75s;
}

.track2 span:nth-child(3) {
  animation-delay: 2s;
}

.track2 span:nth-child(4) {
  animation-delay: 2.25s;
}

.track2 span:nth-child(5) {
  animation-delay: 2.5s;
}

.track2 span:nth-child(6) {
  animation-delay: 2.75s;
}

.track2 span:nth-child(7) {
  animation-delay: 3s;
}

.track2 span:nth-child(8) {
  animation-delay: 3.25s;
}

.track3 span:nth-child(1) {
  animation-delay: 2s;
}

.track4 span:nth-child(1) {
  animation-delay: 2.25s;
}

.track5 span:nth-child(1) {
  animation-delay: 2.5s;
}

.track6 span:nth-child(1) {
  animation-delay: 2.75s;
}

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

@keyframes wtt {
  from { 
    font-variation-settings: 'wght' 400, "opsz" 50;
  }
  to { 
    font-variation-settings: 'wght' 600, "opsz" 12;
  }
}

@keyframes ttw {
  from { 
    font-variation-settings: 'wght' 800, "opsz" 60;
  }
  to { 
    font-variation-settings: 'wght' 400, "opsz" 9;
  }
}