style.css

* {
   margin:0;
   padding:0;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Icons16, sans-serif;

}
.game-board{
    width: 80%;
    height: 500px;
    border-bottom: 15px solid rgb(35, 160, 35);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: linear-gradient(#3a86ff, #e6f6ff);
}
.pipe{
    position: absolute;
    bottom: 0;
    width: 80px;
    right: -80xp;
    animation: pipe-animation 1.5s infinite linear;
}
.mario{
    width: 150px;
    position: absolute;  
    bottom:0;  
}
.jump {
    animation: jump 500ms ease-out;
}
.container {
    width: 100%;
    height: 100px;
    margin-top:10px;
    text-align: center;
    display: none;
    position: absolute;
}
.clouds {
    width:550px;
    position: absolute;
    animation: clouds-animation 20s infinite linear;
}
button{
    width:60px;
    height:40px;
    border: 2px solid orangered;
    border-radius: 4px;
    background:orangered;
    color:yellow;
    margin-top: 20px;
    margin-left: 20px;
    font-family: Pixelify Sans; 
    font-size: large;
    text-align: center;
    cursor: pointer;
}
#pontuacao{
    width:40px;
    height:40px;
    border: 2px solid orangered;
    border-radius: 4px;
    background:orangered;
    color:yellow;
    margin-top: 20px;
    margin-left: 20px;
    font-family: Pixelify Sans; 
    font-size: large;
    text-align: center;
}

@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 clouds-animation {
    from {
        right:-550px;
    }
    to {
        right: 100%
    }
}