#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;
    padding: 0.6%;
    
}
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: x-large;
    border: black 2px dashed;
    visibility: hidden;
    
}