h2{
    color: white;
    text-align: center;
}
body{
    background-color: black;
}
h2::before{
    content: "|";
    animation-name:typing;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes typing {
    0%{
        content:"WOW|";
    }
    20%{
        content:"WOW !!!|";
    }
    40%{
        content:"WOW !!! now";
    }
    60%{
        content:"WOW !!! now i can";
    }
    80%{
        content:"WOW !!! now i can see";
    }
    100%{
        content:"WOW !!! now i can see you";
    }
}
.big{
    background-color: wheat;
    width: 200px;
    height: 400px;
    border-radius:80px ;
    display: flex;
    justify-content: center;
    align-items: center;
     overflow: hidden;
    
}
.sh{
     background-color: white;
    width: 100px;
    height: 100px;
    border-radius:120px ;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.small{
     background-color: wheat;
    width: 200px;
    height: 400px;
    border-radius:80px ;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.mm{
     background-color: white;
    width: 100px;
    height: 100px;
    border-radius:120px ;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.all{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
@keyframes move{
    0%{transform: translate(25px);}
    25%{transform: translate(55px);}
    50%{transform: translate(70px);}
    75%{transform: translate(-25px);}
    100%{transform: translate(-55px);}
   

   
}