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

.game {
    position: relative;
    width: 70%;
    height: 500px;
    border: 1px solid #333;
    margin: 0 auto;
    background-color:  rgb(34, 192, 192);
    overflow: hidden;
}

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

.mario {
    position: absolute;
    width: 130px;
    bottom: 0px;

}

.clouds {
    position: absolute;
    width: 280px;
    bottom: 320px;
    animation: cloud-animation 10s infinite linear;
}


.mario_jump {
    animation: jump-animation 850ms ease-out;
}


@keyframes pipe-animation {
    from {
        right: -10%;
    }

    to {
        right: 100%;
    }
}

@keyframes jump-animation {
    0% {
        bottom: 0px;
    }

    40% {
        bottom: 160px;
    }

    50% {
        bottom: 150px;
    }

    60% {
        bottom: 130px;
    }

    100% {
        bottom: 0px;
    }


}

@keyframes cloud-animation {
    from {
        right: -30%;
    }

    to {
        right: 100%;
    }
}