.text-effect{
color: #000;
font-family: 'Rowdies', sans-serif;
font-size: 100px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
animation: animate 8s linear infinite alternate;
}
.text-effect:before{
content: "";
background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, orange 50%), repeating-linear-gradient(45deg, #111626, #111626 1em, pink 1em, #571B3D 50%);
background-size: 3em 3em, 2em 2em;
mix-blend-mode: screen;
display: block;
width: 100%;
height: 100%;
filter: blur(5px);
position: absolute;
top: 0;
left: 0;
animation: animate 8s linear infinite alternate;
}
@keyframes animate{
from { background-position: 0 0; }
to { background-position: 400% 0; }
}
@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; }
}