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

.background {
    background-image: url(./assets/background.png);
    height: 80vh;
    width: 100vw;
    z-index: 1;
    position: fixed;
    background-size: contain;
    background-repeat: repeat-x;
    animation: background-animation 50s linear infinite;
}

.bottom-background {
    background-image: url(./assets/bottom-background.png);
    height: 40vh;
    width: 100vw;
    bottom: 15px;
    z-index: 2;
    position: fixed;
    background-size: contain;
    background-repeat: repeat-x;
    animation: background-animation 20s linear infinite;
}

.ground {
    background-image: url(./assets/ground.png);
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 15px;
    z-index: 3;
}

.pipe {
    position: fixed;
    bottom: 15px;
    width: 80px;
    right: -80px;
    animation: pipe-animation 2s infinite linear;
    z-index: 9;
}

.mario {
    width: 150px;
    position: absolute;
    bottom: 15px;
    z-index: 10;
}

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


@keyframes pipe-animation {
    from {
        right: 0;

    }

    to {
        right: 100%;

    }
}

@keyframes jump {
    0% {
        bottom: 0;
    }

    40% {
        bottom: 180px;
    }

    50% {
        bottom: 180px;

    }

    60% {
        bottom: 180px;

    }

    100% {
        bottom: 0;
    }
}

@keyframes background-animation {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -100vw 0;
    }
}

#pontos{
    margin: 0 auto;
    text-align: center;
    font-size: xx-large;
    font-family: sans-serif;
}