:root{
    --width:3rem;
}
body{
    overflow: hidden;
    background-image: url("../assets/back.png");
    background-position: 0% 100%;
    background-repeat: repeat-x;
    animation: background-move 10s linear infinite;
}
#game{
    width: 100%;
    height: var(--height);
}
.block{
    width: var(--width);
    height: var(--height);
    background-image: linear-gradient(to left, #84aa41,#e5fc89,#548122);
    position: relative;
    animation: move 3s  linear infinite ;
}
.hole{
    width: var(--width);
    height: 10rem;
    background-image:url("../assets/back.png") ;
    position: relative;
    display: flex;
    top: -25rem;
    justify-content: center;
    left:var(--height);
    animation: move 3s  linear infinite ;
}
.hole::before,.hole::after{
    content: "";
    position: absolute;   
    width: 4rem;
    height: 1.5rem;
    background-image: linear-gradient(to left, #84aa41,#e5fc89,#548122);
}
.hole::after{
    top: 100%;
}
.character{
width: 2.25rem;
height: 2.25rem;
position: absolute;
top:125px;
}
img{
    width: 100%;
    height: 100%;
}
@keyframes move{
    0%{
        left: 100%;
    }
    100%{
        left: -3rem;
    }
}
@keyframes background-move{
    100%{
        background-position: 100% 100%;
    }
}