.text-effect{
color: #f10;
font-family: "Fugaz One", sans-serif;
font-size: 100px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
position: relative;
animation: animate 3s infinite alternate ease-in-out;
}
@keyframes animate{
0% { text-shadow: -6px 4px 0px #ff0000; }
10% { text-shadow: 4px -6px 0px #008000; }
20% { text-shadow: -9px 4px 0px #0000ff; }
30% { text-shadow: 4px -6px 0px #ffff00; }
40% { text-shadow: -8px 4px 0px #ffa500; }
50% { text-shadow: 4px 5px 0px #800080; }
60% { text-shadow: -6px 4px 0px #a52a2a; }
70% { text-shadow: 4px 7px 0px #ffc0cb; }
80% { text-shadow: -9px -4px 0px #00ff00; }
90% { text-shadow: 4px -6px 0px #00ffff; }
100% { text-shadow: -9px 4px 0px #008080; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 65px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 45px; }
}