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

   .marquee {
    width: 100%;
    overflow: hidden;
    font-size: 16px;
    color: white;
    
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 40s linear infinite;
    transform: translateX(100%);
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}