html {
    background:linear-gradient(gold,forestgreen, green);
}

.title {
    display:flex;
    float:right;
    padding-top:0px;
    padding-right:50px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color:rgb(255, 255, 255);
    font-size: 120px;
}

#mario {
    width:150px;
    height:300px;
    padding:15px;
    position:relative;
    animation-name:square;
    animation-duration:4s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-fill-mode: backwards;
    animation-play-state:running;
}

@keyframes square {
    0% {
        left:0px;
        top:255px;
    }

    25% {
        left:0px;
        top:35px;
    }

    50% {
        left:0px;
        top:255px;
    }

    75% {
        left:0px;
        top:35px;
    }

    100% {
        left:0px;
        top:255px;
    }
}

#block {
    width:150px;
    right:185px;
    top:0px;
    z-index:2;
    opacity:1;
    animation:jump 0.6s linear infinite alternate;
    animation-name:jump;
    /*position:absolute;
    /*animation-name:block;*/
    animation-duration: 4s;
}

/*@keyframes block {
    0% {
        left:0px;
        top:150px;
    }

    25% {
        left:0px;
        top:150px;
    }

    50% {
        left:0px;
        top:170px;
    }

    75% {
        left:0px;
        top:150px;
    }

    100% {
        left:0px;
        top:150px;
    }
}
*/
#coin {
    width:70px;
    margin-top:0px;
    z-index:1;
    position:relative;
    right:115px;
    bottom:120px;
    animation: coin 0.9s linear infinite forwards;
    animation-duration: 2s;
    animation-delay: 3s;
}

@keyframes jump {
    0% {
        transform:translateY(0px);
        top:100px;
        right:0px;
    }
    50% {
        translateY(-10px);
        top:100px;
        right:0px;
    }
    100% {
        translateY(0px);
        top:100px;
        right:0px;
    }
}

@keyframes coin {
    0% {
        transform:translateY(0px) rotateY('0deg');
        opacity:1;
    }
    50% {
        transform: translateY(-100px) rotateY(180deg);
        opacity:0;
    }
    100% {
        transform:translateY(-100px) rotateY('360deg');
        opacity:0;
    }
}