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

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


}

.game{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.pipe{
    position: absolute;
    bottom: 0;
     
    width: 60px;
      
    animation: pipe-animation 1s infinite linear;


}

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


.jump{
    animation: jump  500ms  ease-out;
}
.clouds{

    position: absolute;
    width: 550px;
    animation: cloud-animation 20s 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:-550px;
    }
    to{
        right: 100%;
    }
}