:root{
--color:#1e3799;
--color1:#8A9B0F;
--color2:#C02942;
--color3:#00A0B0;
}
.text-effect{
color:transparent;
font-family: "Russo One", sans-serif;
font-size: 100px;
font-weight: 500;
text-align: center;
letter-spacing: 2px;
position: relative;
}
.text-effect:before{
content:attr(data-content);
background: linear-gradient(90deg,var(--color) 25%,var(--color1) 0 50%,var(--color2) 0 75%,var(--color3) 0) 0 0/400% 100%;
-webkit-background-clip: text;
background-clip: text;
width: 100%;
height:100%;
position:absolute;
top: 0;
left: 0;
animation: animate 5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes animate{
25% {background-position: calc(1*100%/3) 0}
50% {background-position: calc(2*100%/3) 0}
75% {background-position: calc(3*100%/3) 0}
100%{background-position: calc(4*100%/3) 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; }
}