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

html body {
    width: 100%;
    height: 100vh;
}

.box {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(#87ceeb, #e0f6ff);
    border-bottom: groove 30px rgb(11, 207, 11);
}

.container-nuvens1 {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50vh;
    animation: nuvens-animation infinite linear 20s;
}

.container-nuvens2 {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 50vh;
    animation: nuvens-animation infinite linear 20s;
}

.nuvens {
    width: 40vh;
    height: 30vh;
}

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

.mario-jump {
    position: absolute;
    width: 130px;
    bottom: 0px;
    animation: mario-jump linear 570ms;
    animation-timing-function: ease-out;
}

.pipe {
    position: absolute;
    width: 80px;
    height: 70px;
    bottom: 0px;
    overflow: hidden;
    animation: pipe-animation infinite linear 2s;
}

@keyframes nuvens-animation {
    from {
        right: -0;
    }

    to {
        right: 100%;
    }
}

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

    40% {
        bottom: 180px;
    }

    50% {
        bottom: 180px;
    }

    60% {
        bottom: 180px;
    }

    100% {
        bottom: 0;
    }
}

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

    to {
        right: 100%;
    }
}

@media(max-width: 480px) {
    .box {
        height: 92vh;
    }

    .nuvens {
        width: 20vh;
        height: 20vh;
    }

    .pipe {
        width: 30px;
        height: 50px;
    }
}