*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100dvw;
    height: 100dvh;
    background-color: black;
    overflow: hidden;
}

.wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back{
    position: absolute;
    height: 300px;
    width: 300px;
    background:linear-gradient(45deg, blue, red,green,yellow);
    animation: Giro 15s linear infinite normal;
}


.text{
    font-size: 10vw;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    color:  transparent;
    background-image:linear-gradient(130deg, red,blue, green);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: Giros 10s ease-in-out infinite alternate;
    animation: name duration timing-function delay iteration-count direction fill-mode;
}
@keyframes Giros {
    0%{
        background-position: 0% 25%;
        text-shadow: -5vw 2vw 20vw red;
    }
    25%{
        background-position: 25% 50%;
        text-shadow: -2vw 5vw 15vw blue;
    }
    50%{
        background-position: 50% 75%;
        text-shadow: 0vw 0vw 20vw blue
    }
    75%{
        background-position: 75% 100%;
        text-shadow: 0px 0px 15vw green
    }
    100%{
        background-position: 100% 0%;
        text-shadow: 10vw 5vw 20vw green
    }    
}