.text-effect{
color: transparent;
background: repeating-radial-gradient(circle at 100% 100%, rgba(255, 190, 11, 0.5) 4%,
rgba(255, 190, 11, 0.5) 8%, rgba(251, 86, 7, 0.5) 8%, rgba(251, 86, 7, 0.5) 12%,
rgba(255, 0, 110, 0.5) 12%, rgba(255, 0, 110, 0.5) 16%, rgba(131, 56, 236, 0.5) 16%,
rgba(131, 56, 236, 0.8) 20%, rgba(58, 134, 255, 0.5) 20%, rgba(58, 134, 255, 0.5) 24%),
repeating-radial-gradient(circle at 0% 100%, rgba(255, 190, 11, 0.7) 4%,
rgba(255, 190, 11, 0.9) 8%, rgba(251, 86, 7, 0.7) 8%, rgba(251, 86, 7, 0.9) 12%,
rgba(255, 0, 110, 0.7) 12%, rgba(255, 0, 110, 0.9) 16%, rgba(131, 56, 236, 0.8) 16%,
rgba(131, 56, 236, 0.8) 20%, rgba(58, 134, 255, 0.8) 20%, rgba(58, 134, 255, 0.8) 24%);
background-size: 250px 250px;
background-position: 0 0;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
font-family: 'Viga', sans-serif;
font-size: 100px;
font-weight: 800;
letter-spacing:2px;
text-align: center;
animation: stripes 3s linear infinite;
}
@keyframes stripes{
100% { background-position: 250px 0, 250px 0, 100px 0; }
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 45px; }
}
