CSS: Text transition for responsive design

gistfile1

body {
    font-size:11em;
    color:#000;
    transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    -moz-transition:all .5s ease-in-out; 
    -webkit-transition:all .5s ease-in-out;
}
 
@media screen and (max-width:500px) {
body {
        font-size:8em;
        color:#ff0000;
  }
}