<link href="https://fonts.googleapis.com/css?family=Merriweather:400,900" rel="stylesheet">

<h1> 
 MICAH IS A HIPSTER
</h1>


<p> 敵ほぜじ政注カテエ協文チラリイ未両学テネ効62趣称モニ的交ナウワロ車代ゅス体価クほえ気98調げふく献使ホ判3都ろすづく政解けゆわゃ球最咲幼府へうおょ。 </p>

body {
  background-image:url(https://images.unsplash.com/photo-1493606278519-11aa9f86e40a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8a11b1845e152d06c429fe32e5a53adc&auto=format&fit=crop&w=1950&q=80);
  background-size: cover;
}

h1{
  font-family: 'Merriweather',serif;
  font-weight: 900;
  text-align: center;
  margin: 10% 0 0 0;
  letter-spacing: 5px;
  color: #333333;

}

h1 span {
  transition: 1s;
}

h1 span:hover {
  transition: color 0s;
  color:green;
}

/*  How to color is customized  -> on hover the color changes based on nth childs*/

h1 span:nth-child(1n):hover{
  color: #84DCC6;
  font-size: 1.1em
}

h1 span:nth-child(2n):hover{
  color: #A5FFD6;
}

h1 span:nth-child(3n):hover{
  color: #FFA69E;
}


/* for p tag */

p {
  font-size: 1.4em;
  font-weight: 200;
  text-align: center;
  margin: 2% auto;
  max-width: 20%;
}
p span {
  transition: 1s;
}

p span:hover {
  transition: color 0s;
  color:green;
}

/*  How to color is customized  -> on hover the color changes based on nth childs*/

p span:nth-child(1n):hover{
  color: #84DCC6;
  font-size: 1.1em
}

p span:nth-child(2n):hover{
  color: #A5FFD6;
}

p span:nth-child(3n):hover{
  color: #FFA69E;
}

// Credits to SuperHi 
// https://www.superhi.com/video/playground-paris-colorful-text-hover-effect

function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr)}

function makeSpans (selector) {
  var _document$querySelect = document.querySelectorAll(selector)
  var _document$querySelect2 = _toArray(_document$querySelect)
  var elements = _document$querySelect2.slice(0)
  
  return elements.map(function (element) {
    var text = element.innerText.split('')
    var spans = text.map(function (letter){
      return '<span>' + letter + '</span>'
    }).join('')
    return element.innerHTML = spans
  })
}

// usuage with single selector
makeSpans('h1 , p')