.demo{ background: #000; }

.text-effect{
    color: #000;
    font-family: 'Sriracha', cursive;
    font-size: 100px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}

.text-effect span{
    margin: 0 1px;
    display: inline-block;
    animation: Rainbow 4s infinite linear;
}

.text-effect span:nth-child(1){ animation-delay: 0s; }
.text-effect span:nth-child(2){ animation-delay: 0.25s; }
.text-effect span:nth-child(3){ animation-delay: 0.5s; }
.text-effect span:nth-child(4){ animation-delay: 0.75s; }
.text-effect span:nth-child(5){ animation-delay: 1s; }
.text-effect span:nth-child(6){ animation-delay: 1.25s; }
.text-effect span:nth-child(7){ animation-delay: 1.5s; }
.text-effect span:nth-child(8){ animation-delay: 1.75s; }
.text-effect span:nth-child(9){ animation-delay: 2s; }
.text-effect span:nth-child(10){ animation-delay: 2.25s; }

@keyframes Rainbow{
    0%   { text-shadow: 0px 0px 5px red; }
    14%  { text-shadow: 0px 0px 5px orange; }
    28%  { text-shadow: 0px 0px 5px yellow; -webkit-transform: translateY(-25px);}
    43%  { text-shadow: 0px 0px 5px green; }
    57% { text-shadow: 0px 0px 5px blue; }
	71% { text-shadow: 0px 0px 5px indigo; }
	85% { text-shadow: 0px 0px 5px violet; }
	100% { text-shadow: 0px 0px 5px red; }
}

@media only screen and (max-width: 990px){
    .text-effect{ font-size: 70px; }
}

@media only screen and (max-width: 767px){
    .text-effect{ font-size: 60px; }
}

@media only screen and (max-width: 576px){
    .text-effect{ font-size: 40px; }
}