.text-effect{
font-family: 'VT323', monospace;
font-size: 120px;
text-align: center;
text-transform: uppercase;
animation: animate 1s infinite;
}
@keyframes animate{
0%{
color: lime;
text-shadow: 0 0 20px green;
}
25%{
color: green;
text-shadow: 2px 2px 2px lime;
transform: translate(-2px, 1px);
}
40%{
color: lime;
text-shadow: none;
transform: translate(0, 0);
}
50%{
color: green;
text-shadow: 5px 5px 2px blue, -5px -5px 2px red;
transform: translate(0px, 5px);
}
70%{
color: lime;
text-shadow: none;
transform: translate(0, 0);
}
80%{
color: lime;
text-shadow: 0 0 20px green;
transform: translate(-2px, 1px);
}
100%{
color: lime;
text-shadow: none;
}
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 110px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 90px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 479px){
.text-effect{ font-size: 45px; }
}