style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.game-board {
    width: 80%;
    height: 800px;
    border-bottom: 15px solid green;
    border: 1px solid rgb(0, 0, 0);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: linear-gradient(#87CEEB, #E0F6FF);
}

.pipe{
    position: absolute;
    bottom: 0;
    width: 70px;
    left: 150px;
    animation: pipe-animation 2s infinite linear ;
}

.mario{
    width: 150px;
    position: absolute;
    bottom: 0;}

.jump{
    animation: jump 500ns infinite ease-out;
}

.cloud{
    width: 500px;
    position: absolute;
    animation: cloud-animation 10s infinite linear;
}
 @keyframes pipe-animation {
    from{
        right: -80px;
    }
    to{
        right: 100%;
    }
    
 }

 @keyframes jump {
    0%{
        bottom: 0;
    }
     40%{
        bottom: 180px;
     }
     50%{
        bottom: 180px;
     }
     60%{
        bottom: 180px;
     }
     100%{
        bottom: 0;
     }
 }

 @keyframes cloud-animation {
 from{
    right: -500px;
 }

 to{
    right: 100%;
 }

 }