Style.css

img{
    width: 100%;
    height: 100%;
}

#Score{
    position: absolute;
    font-size: 5vw;
    left: 50%;
    top: 15%;
    transform: translate(-50%, -50%);
}

#HighScore{
    position: absolute;
    font-size: 1vw;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
}

#Game{
    position: absolute;
    width: 75%;
    height: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-width: 3px;
    border-style: solid;
    border-color: black;
}
#Grass{
    position: absolute;
    width: 75%;
    height: 10%;
    top: 93%;
    left: 50%;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    transform: translate(-50%, -50%);
    background-color: rgb(0, 255, 21);
}

#Player{
    position: absolute;
    width: 3vw;
    height: 3vw;
    top: 100%;
    left: 5%;
    transform: translate(0, -100%);
}

#Obstacle{
    position: absolute;
    width: 2.5vw;
    height: 7.5vw;
    left: 100%;
    top: 100%;
    transform: translate(0, -100%);
    animation: ObstacleMoveAnim 1.35s infinite linear;
}

.Jump{
    animation: JumpAnim 1000ms;
}

@keyframes JumpAnim{
    from{
        top: 100%;
    } 50% {
        top: 65%;
    } to {
        top: 100%;
    }
}

@keyframes ObstacleMoveAnim{
    from{
        left: 100%;
    } to {
        left: 0%;
    }
}