body{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-direction: column;
}


h1::before{
    content: "";
    animation-name: x ;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    
    
    
    

}
@keyframes x{
    0%{
        content: "W";
        
    }
    5%{
        content: "Wo";
    }
    10%{
        content: "WoW";
    }
    15%{
        content: "WoW!!!";
    }
    20%{
        content: "WoW!!!n";
    }
    25%{
        content: "WoW!!!no";
    }
    30%{
        content: "WoW!!!now";
    }
    35%{
        content: "WoW!!!now i";
    }
    40%{
        content: "WoW!!!now i c";
    }
    55%{
        content: "WoW!!!now i ca";
    }
    65%{
        content: "WoW!!!now i can";
    }
    75%{
        content: "WoW!!!now i can s";
    }
    80%{
        content: "WoW!!!now i can se";
    }
    85%{
        content: "WoW!!!now i can see";
    }
    90%{
        content: "WoW!!!now i can see yo";
    }
    100%{
        content: "WoW!!!now i can see you.";
    }


}


div , .d1{
    width: 300px;
    height: 400px;
    border-radius: 20px;
    background-color: black;
     display: flex;
    justify-content: center;
    align-items: center;
    
}
section{
    display: flex;
    gap: 20px;

}

.g{
    background-color: aliceblue;
    width: 90px;
    height: 110px;
    border-radius: 50px;
    
    padding: 5px;
    animation-name: p ;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    


}
@keyframes p{
    0%{
        transform: translate(50px,0px);

    }
    
    100%{
        transform: translate(-50px,0px);

    }
    
}