.text-effect{
color: rgba(255,255,255,0.7);
font-family: 'Wallpoet', cursive;
font-size: 100px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
animation: 3s linear 0s normal none infinite running animate;
}
@keyframes animate{
0%{ text-shadow: -6px 4px 0px #ff0000; }
10%{ text-shadow: 4px -6px 0px green; }
20%{ text-shadow: -9px 4px 0px blue; }
30%{ text-shadow: 4px -6px 0px yellow; }
40%{ text-shadow: -8px 4px 0px orange; }
50%{ text-shadow: 4px 5px 0px purple; }
60%{ text-shadow: -6px 4px 0px brown; }
70%{ text-shadow: 4px 7px 0px pink; }
80%{ text-shadow: -9px -4px 0px lime; }
90%{ text-shadow: 4px -6px 0px cyan; }
100%{ text-shadow: -9px 4px 0px teal; }
}
@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: 35px; }
}