/* center the game and remove margin */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
}

/* displaying the game with full screen with and bottom border as the ground */
.game {
    width: 100vw;
    border-bottom: 1px solid black;
    position: relative;
}

/* sticking the dino and the cactus to the floor */
.dino, .cactus {
    position: absolute;
    bottom: 0;
}

.dino {
    left: 50px;
}

.cactus {
    right: 0;
    height: 50px;
}

.jump {
    animation: dino-jump 2s;
}

.move {
    animation: cactus-move 6s infinite;
}

@keyframes cactus-move {
    0% {
        right: 0;
    }

    100% {
        right: 100%;
    }
}

@keyframes dino-jump {
    0% {
        margin-bottom: 0;
    }

    50% {
        margin-bottom: 150px;
    }

    100% {
        margin-bottom: 0;
    }
}