/* background: linear-gradient(180deg , rgba(255,255,255,.0)10% , rgba(255,255,255,.3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */

:root{
    --clr:red;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
.container{
    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    align-items: center;
    /* border: 2px solid red; */
}
.box{
    width: 700px;
    height: 300px;
    /* border: 2px solid red; */
}
.text{
    display: flex;
    color: var(--clr);
    justify-content: center;
    font-size: 100px;
}
.shadow{
    display: flex;
    justify-content: center;
    font-size: 100px;
}
.shadow div{
    transform: rotate(180deg) rotateY(180deg);
    background: linear-gradient(180deg , rgba(255,255,255,.0)10% , rgba(255,255,255,.3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text .letter{
    animation: move 2s linear infinite;
    animation-delay: calc(var(--i) * .2s) ;
    text-shadow: var(--clr) 0px 0px 10px , var(--clr) 0px 0px 30px, var(--clr) 0px 0px 50px;
    margin-left: 10px;
}

.shadow .letter{
    animation: move1 2s linear infinite;
    animation-delay: calc(var(--i) * .2s) ;
    margin-left: 10px;
}

@keyframes move {
    0%,100%{
        transform: translateY(-80px);
    }
    50%{
        transform: translateY(0px);
    }
}

@keyframes move1 {
    0%,100%{
        transform: translateY(+80px) rotate(180deg) rotateY(180deg);
    }
    50%{
        transform: translateY(0px) rotate(180deg) rotateY(180deg);
    }
}
@media (max-width:800px) {
    .container{
        transform: scale(.7);
    }
}
@media (max-width:500px) {
    .container{
        transform: scale(.5);
    }
}
@media (max-width:350px) {
    .container{
        transform: scale(.4);
    }
}