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

body{
    background-color: rgb(93, 231, 93);
}
.game-board{
    width: 100%;
    height: 500px;
    border-bottom: 15px solid rgb(35, 160, 35);
    margin: 0 auto;
    position: relative;
    background-color: white;
    overflow: hidden;
    background: linear-gradient(#87ceeb, #e0f6ff);
    
}

.pipe{
    position: absolute;
    bottom:0;
    width: 70px;
    animation: pipeTransition 1.5s infinite linear;
}

@keyframes pipeTransition{
    from{
        right: -80px;
    }
    to{
        right: 100%;
    }
}

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

.jump{
    animation: marioJump 600ms ease-out;
}
@keyframes marioJump{
    0%{
        bottom:0;
    }
    40%{
        bottom: 120px;
    }
    50%{
        bottom: 120px;
    }
    60%{
        bottom: 120px;
    }
    100%{
        bottom:0;
    }
}

.clouds{
    position: absolute;
    width: 550px;
    animation: cloudsTransition 20s infinite linear;
}

@keyframes cloudsTransition{
    from{
        right: -550px;
    }
    to{
        right: 100%;
    }
}