@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Itim', cursive;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    animation: hafizh 5s linear infinite;
}

.wavy{
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2));
}

.wavy span {
    position: relative;
    display: inline-block;
    color: #333;
    font-size: 2em;
    text-transform: uppercase;
    animation: animation-by-hafizh 2s ease-in-out infinite, hafizhgans 5s linear infinite ;       
    animation-delay: calc(0.1s * var(--i));
}

@keyframes animation-by-hafizh{
    0%{
        transform: translateY(0px);
    }
    20%{
        transform:translateY(-20px);
    }
    40%, 100%{
        transform: translateY(0px);
    }
}

@keyframes hafizhgans {
    0%{
        color:red;
        text-shadow: 0 0 10px red,
         0 0 20px red,
         0 0 40px red,
         0 0 80px red,
         0 0 160px red;

    }
    50%{
        color: redmarine;
        text-shadow:  0 0 5px red,
        0 0 20px red,
        0 0 40px red,
        0 0 80px red,
        0 0 160px red;
    }
    100%{
        color: #333;
        text-shadow:  none;
    }
}

@keyframes hafizh {
    0%{
       background: #000000;
    }
    20%{
        background: #000000;
    }
    100%{
       background: #000;
    }
}