.text-effect{
background-repeat: no-repeat;
font-family: 'Roboto', sans-serif;
font-size: 100px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
-webkit-text-stroke: 0.02em red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
position: relative;
animation: animate 1s ease-in infinite alternate;
}
@keyframes animate{
0%{
background-image: radial-gradient(circle farthest-corner at center center, red 0%, red 50%, transparent 50.1%);
background-position: 50% 50%;
background-size: 0% 0%;
}
100%{ background-size: 500% 600%; }
}
@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; }
}