style.css

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: red;
    overflow: hidden;
}


.gameContainer{
   background: url(/images/bg.jpg);
   background-size: 100vw 100vh;
   width: 100%;
   height: 100vh;
   background-repeat: no-repeat;
   object-fit: contain;
}

.dino{
    background-image: url(/images/newdino.png);
    width: 522px;
    height: 429px;
    position: absolute;
    background-repeat: no-repeat;
    transform: scale(0.3);
    bottom: -120px;
    left: 0vw;
}

.animateDino{
    animation: dino 0.6s linear;
}

@keyframes dino{
    0%{
        bottom: 0;
    }

    50%{
        bottom: 130px;
    }

    100%{
        bottom: 0;
    }
}

.obstacle{
    background-image: url(/images/ca.png);
    width: 502px;
    height: 493px;
    transform: scale(0.3);
    position: absolute;
    bottom: -136px;
    left: 58vw;
    right: -47vw;
}

.obstacleAni{
    animation: obstacleAni 5s linear infinite;
}

@keyframes obstacleAni{
    0%{
        left: 100vw;
    }

    100%{
        left: -30vw;
    }
}

.gameOver{
    /* visibility: hidden; */
    position: relative;
    top: 63px;
    font-size: 53px;
    text-align: center;
    font-family: cursive;
}

#scoreCnt{
    border: 4px solid black;
    width: 110px;
    padding: 4px;
    text-align: center;
    border-radius: 12px;
    position: absolute;
    right: 34px;
    top: 23px;
    font-weight: bold;
    font-family: cursive;
    background: linear-gradient(lightgreen,darkgreen);
}


@media only screen and (max-width : 850px){
    .gameContainer{
        background-size: 100vw 100vh;
        object-fit: contain;
    }

    .obstacle{
        left: 12vw;
    }
}