@charset "UTF-8";

body{
  margin: 0;
  background: whitesmoke;
  color: rgb(42, 42, 42);
  font-family: 'Times New Roman', Times, serif;
}

.text{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  font-size: 100px;
}

span{
  margin-right: 10px;
  animation: colorChange 0.3s forwards;
  animation-delay: calc(2s + var(--i) * 0.2s);
}

@keyframes colorChange{
  0%{
    color: black;
  }
  100%{
    color: var(--color);
  }
}

span:nth-child(5n+1) { --color: red; }    
/*nth-child() selects elements based on position among siblings
  So in the HTML:
    <span>Nel</span>  = 1     (posizione)
    <span>mezzo</span> = 2
  
  So if you write nth-child(1) it selects the first word "Nel"

  To make is scalable you can use the formula:
    ax+b
    a = step size
    x = counter
    b = starting off set
    (This is the equation of a line)

    So in the case
    5x+1, when x = 0, we start from word 1

    Why the 5?
    It creates the repetition of 5 words; so every 5 words the loop of the color restars
    --> depends on the amount of colors we have
*/

span:nth-child(5n+2) { --color: orange; }
span:nth-child(5n+3) { --color: yellow; }
span:nth-child(5n+4) { --color: cyan; }
span:nth-child(5n+5) { --color: violet; }

a{
  color: inherit;
}