#canvas{

    background: url(bgi.png);

    position: relative;

    height: 50vw;

    width: 100vw;

    background-size: 100%;

    margin: auto;

    background-repeat: no-repeat;

}

body{

    background-color: black;

     overflow: hidden; 

}

h1{

    margin: auto;

    text-align: center;

    color: aliceblue;

   

   

}

h2{

    margin: auto;

    text-align: center;

    color: black;

   

    

}

 

#cat, #dino{

   

    height: 4.7vw;

    width: 5vw;

    position: absolute;

     

}

 

#cat{

    top: 59%;

    left: 10%;

    background: url(cat1.png);

    background-size: 100%;

    height: 4.7vw;

    width: 5vw;

    

 

}

 

#dino{

    top: 60%;

    left: 90%;

    background: url(dino1.png);

    background-size: 100%;

   

    

 

}

 

.animateCat{

    animation: cat 1.2s linear;

}

 

@keyframes cat{

    0%{

        top: 59%;

    }

    50%{

        top: 30%;

    }

    100%{

        top: 59%;

    }

}

.animateDino{

    animation: dino 4000ms linear infinite;

}

 

@keyframes dino{

    0%{

        left: 110%;

    }

    50%{

        left: 50%;

    }

    100%{

        left: -10%;

    }

}

#score{

    font-size: x-large;

 

}

.gameOver{

    position: absolute;

    height: 3.3vw;

    width: 15vw;

    top: 30%;

    left: 41%;

    /* font-size: smaller;*/

    

    visibility: hidden;

   

}