@font-face {
  font-family: 'Atma';
  src: url('fonts/Atma-Regular.ttf') format('truetype');
}

/* body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Atma;
} */

.word-steps {
  display: flex;
  font-size: 4rem;
  /* font-weight: bold; */
  font-family: Atma;
}
.word-steps::before {
  content: '';
  background-image: url('img/path.png');
  position: absolute;
  top: -25px;
  left: 5px;
  /* transform: translateX(-50%); */
  width: 25px;
  height: 33px;
  background-size: 205px;
  background-repeat: no-repeat;
  opacity: 1;
  animation: footprintsBackground 6s ease-in-out forwards;
  animation-delay: 1s;
}

.word-steps l::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation: footprintsVisibility 1s ease-in-out forwards;
  animation-delay: calc(var(--i) * 0.5s);
}

.word-steps l:nth-child(odd)::before {
  background-image: url('img/step-left.png');
}

.word-steps l:nth-child(even)::before {
  background-image: url('img/step-right.png');
}
.word-steps l:nth-child(1)::before {
  display: none;
}
.word-steps l:nth-child(2)::before {
  display: none;
}
.word-steps l:nth-child(10)::before {
  animation: footprintsVisibilityLast 1s ease-in-out forwards;
  animation-delay: calc(var(--i) * 0.5s);
}
.word-steps l:nth-child(11)::before {
  animation: footprintsVisibilityLast 1s ease-in-out forwards;
  animation-delay: calc(var(--i) * 0.5s);
}

.word-steps l {
  color: green;
  /* text-shadow: 2px 2px 4px rgba(118, 118, 118, 0.508); */
  animation: changeColor 0.1s ease-in-out forwards;
  animation-delay: calc(var(--i) * 0.5s);
}
  
/* Add index-based delay for each letter */
.word-steps l:nth-child(1) { --i: 0; }
.word-steps l:nth-child(2) { --i: 1; }
.word-steps l:nth-child(3) { --i: 2; }
.word-steps l:nth-child(4) { --i: 3; }
.word-steps l:nth-child(5) { --i: 4; }
.word-steps l:nth-child(6) { --i: 5; }
.word-steps l:nth-child(7) { --i: 6; }
.word-steps l:nth-child(8) { --i: 7; }
.word-steps l:nth-child(9) { --i: 8; }
.word-steps l:nth-child(10) { --i: 9; }
.word-steps l:nth-child(11) { --i: 10; }
  
/* Animation to change color */
@keyframes changeColor {
  0% {
    /* color: green; */
    transform: scale(1);
  }

  100% {
    /* color: var(--color); */
  }
}

@keyframes footprintsVisibility {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes footprintsVisibilityLast {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes footprintsBackground {
  0% { width: 25px; }
  100% { width: 200px; }
}