*{
    margin:0;
    padding:0;
}
body{
    background-color:red;
    overflow: hidden;
}
@media only screen and (max-width:900px)and (min-width:300px){
    body{
        background-color:red;
        overflow: hidden;
    }
    .gameContainer{
        background-image:url(bg.jpg);
        background-repeat: no-repeat;
        background-size:100vw 100vh;
        width:100%;
        height:100vh;}
    .player{
            background-image:url(minininja.png);
            background-repeat: no-repeat;
            background-size:cover;
            width: 30px;
            height:30px;
            position:absolute;
            bottom:0;
            left:20px;
        }
   .obstacle{
            background-image:url(minidragon.png);
            background-repeat: no-repeat;
            background-size: cover;
            width:50px;
            height:50px;
            position:absolute;
            bottom:0;
            right:20px;
        }
    .gameOver{
            position:relative;
            top:100px;
            /* border:2px solid seashell;
            /* border-radius: 4px ; */
            text-align: center; 
            text-decoration: underline;
            text-decoration-color: silver;
            text-transform: none;
            font-size: 40px;
            font-family: cursive;
            color:black;
            text-shadow:white;
            /* visibility:hidden; */
            font-weight: bold;
        }
        #scoreCont{
            position:absolute;
            font-weight: bold;
            border:5px solid lightsalmon;
            color:mediumslateblue;
            border-radius:4px;
            padding:10px;
            left:10px;
            top:34px;
            font-size: 20px;
            font-family: cursive;
        }
        .animatePlayer{
            animation: player 2s linear;
        }
        @keyframes player{
            0%{
             bottom:0px;
            }
            50%{
              bottom:300px;
            }
            100%{
                bottom:0px;
                /* left:600px;
                position:absolute; */
            }
        
        }
        /* .animateDragon{
            animation: animateDragon  5s linear infinite;
        }
        @keyframes animateDragon{
            0%{
                left:100vw;
            }
            100%{
                left:-10vw;
            }
        } */
        .obstacleAni{
            animation: obstacleAni 5s linear infinite;
        }
        @keyframes obstacleAni{
            0%{
                left: 100vw;
            }
            100%{
                left: -10vw;
            }
        }
    
}
.gameContainer{
    background-image:url(bg.jpg);
    background-repeat: no-repeat;
    background-size:100vw 100vh;
    width:100%;
    height:100vh;
}
.player{
    background-image:url(minininja.png);
    background-repeat: no-repeat;
    background-size:cover;
    width: 130px;
    height:130px;
    position:absolute;
    bottom:0;
    left:200px;
}
.obstacle{
    background-image:url(minidragon.png);
    background-repeat: no-repeat;
    background-size: cover;
    width:150px;
    height:150px;
    position:absolute;
    bottom:0;
    right:200px;
}
.gameOver{
    position:relative;
    top:150px;
    /* border:2px solid seashell;
    /* border-radius: 4px ; */
    text-align: center; 
    text-decoration: underline;
    text-decoration-color: silver;
    text-transform: none;
    font-size: 80px;
    font-family: cursive;
    color:black;
    text-shadow:white;
    /* visibility:hidden; */
    font-weight: bold;
}
#scoreCont{
    position:absolute;
    font-weight: bold;
    border:5px solid lightsalmon;
    color:mediumslateblue;
    border-radius:4px;
    padding:10px;
    left:30px;
    top:66px;
    font-size: 40px;
    font-family: cursive;
}
.animatePlayer{
    animation: player 2s linear;
}
@keyframes player{
    0%{
     bottom:0px;
    }
    50%{
      bottom:500px;
    }
    100%{
        bottom:0px;
        /* left:600px;
        position:absolute; */
    }

}
/* .animateDragon{
    animation: animateDragon  5s linear infinite;
}
@keyframes animateDragon{
    0%{
        left:100vw;
    }
    100%{
        left:-10vw;
    }
} */
.obstacleAni{
    animation: obstacleAni 5s linear infinite;
}
@keyframes obstacleAni{
    0%{
        left: 100vw;
    }
    100%{
        left: -10vw;
    }
}