@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

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

body {
    overflow-y: hidden;
}

.tela-jogo {
    position: relative;
    margin: auto;
    width: 800px;
    height: 600px;
    border: 1px solid black;
    overflow: hidden;
    background: linear-gradient(#87CEEB, #E0F6FF);
}

#main {
    position: relative;
    margin: auto;
    width: 800px;
    height: 600px;
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
}

#pipe {
    position: absolute;
    bottom: 43px;
    height: 70px;
    animation: movimento-barril 1.5s infinite linear;
    z-index: 10;
}

#mario {
    
    position: absolute;
    width: 120px;
    bottom: 43px;
    z-index: 10;
}

#maca {
    position: absolute;
    bottom: 40px;
    left: 225px;
    width: 180px;
    animation: movimento-maca 4s infinite linear ;

}

@keyframes movimento-maca {
    from {
        left: 110%;
    }
    to {
        left: -600px;
    }
}

.arbusto {
    position: absolute;
    bottom: 0;  
}

#arbusto-pequeno {
    animation: movimento-arbusto 4s infinite linear;
}

@keyframes movimento-arbusto {
    from {
        right: -600px;
    }
    to {
        right: 100%;
    }
}

#arbusto-medio {
    animation: movimento-arbusto-medio 4s infinite linear;
    width: 250px;
    left: 200px;
}

@keyframes movimento-arbusto-medio {
    from {
        left: 105%;
    }
    to {
        left: -600px;
    }
}

#nuvem {
    position: absolute;
    width: 300px;
    animation: movimento-nuvem 8s infinite linear;
}

@keyframes movimento-nuvem {
    from {
        right: -100px;
    }
    to {
        right: 100%;
    }
}

#baixo {
    position: absolute;
    bottom: 43px;
    margin: auto;
    width: 800px;
    z-index: 5;
    margin-top: -10px;
    box-sizing: border-box;

}

#baixo > img {
    position: absolute;
    width: 100%;
    
}

#chao-l {
    animation: movimento-chao-l 1.5s infinite linear ;
    overflow: hidden;
    
   
}

@keyframes movimento-chao-l {
    from {
        left: 0%;
    }
    to {
        left: -100%;
    }
}

#chao-r {
    animation: movimento-chao-r 1.5s infinite linear ;
    overflow: hidden;
    
    
}

@keyframes movimento-chao-r {
    from {
        right: -100%;
    }
    to {
        right: 0%;
    }
}


.jump {
    animation: pulo 0.8s ease-in-out;
    
}

@keyframes pulo {
    0% { bottom: 43px; }
    50% { bottom: 193px; } 
    100% { bottom: 43px; }
}

#pontos {
    position: absolute;
    font-family: 'Bangers', cursive;
    top: 20px;
    left: 30px;
    z-index: 10;
}

#reload {
    position: absolute;
    margin-top: 50%;
    align-content: center;
    left: 50%;
    transform: translate(-50%);
    width: 150px;
    height: 40px;
    border-radius: 50px;
    box-shadow: inset 0 0 7px #060003;
    background: radial-gradient(circle,  #FDC202, #F9BB0B);
    transition: background-color 0.3s ease;
    /*box-shadow:  0 5px #E18604;*/
    border-width: 3px;
    cursor: pointer;
    border: none;
    text-shadow: 
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

button:hover{
    background-color: radial-gradient(circle, #0056b3, #FDC202);
  
}

@keyframes game-over {
    
    50% { bottom: 50% ; }
    100% { bottom: -50%; }
}

@keyframes movimento-barril {
    from {
        right: -100px;
    }
    to {
        right: 100%;
    }
}