title: Easter Egg - letter spacing
body: <p>I created a little easter egg. When you hover over the <code>h1</code> title, letters are created, and animated letters fall to the bottom of the page. I wanted to create more spacing between the letters as the fall so they aren't all mushed together.</p>
  
  <p>To do that, I did:</p>
  
  <pre><code>                myspan.css({
                      "color" : "Navy",
                      "position": "absolute",
                      "margin" : "20px",
                      "padding" : "20px",
                      "left": $(this).position().left,
                      "top": parent.height()
                  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/AiAHq.png" alt="enter image description here"></p>
  
  <p><strong>But it didn't work. Any thoughts? Here's the code:</strong></p>
  
  <pre><code>            $(".title").lettering(); //splits H1 letters into individual spans
              $("h1 span").mouseenter(function () {   
  
                  var colors = ["White"],
                      rand = Math.floor((Math.random()*colors.length-1)+1),
                      string = "National Champs!",
                      letter = string.charAt(index),
                      myspan = $(document.createElement('span')),
  
                      parent = $(this).parent(),
                      val = $(this);
  
                  if (index &gt;= string.length) {
                      index = 0;
                  }
                  else {
                      index++;
                  }
  
                  myspan.append(letter);
                  parent.append(myspan);
                  myspan.css({
                      "color" : "Navy",
                      "position": "absolute",
                      "margin" : "20px",
                      "padding" : "20px",
                      "left": $(this).position().left,
                      "top": parent.height()
                  });
                  myspan.animate({"top": $(window).outerHeight()}, 9000, "linear", function() {
                      $(this).remove();
                  });
  
                  val.css({"color" : colors[rand]});
  
                  setTimeout(function() { 
                      val.css({"color" : "black"});
                      val.css({"font-size" : 35}); 
                      //index =0;
                  },2000);            
              });
  </code></pre>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>I did</p>
  
  <pre><code>myspan.css({
                      "color" : "Navy",
                      "position": "absolute",
                      "letter-spacing" : "2px",
                      "left": $(this).position().left,
                      "top": parent.height()
                  });
  </code></pre>
  
  <p>This didn't work</p>