* {
    margin : 0;
    padding: 0;
    overflow: hidden;
}
 
.backgroundImg {
    background-image : url("bg.png");
    background-size  : 100vw 100vh;
    background-repeat: no-repeat;
    height           : 100vh;
}
 
#score {
    border    : 2px solid black;
    width     : 70px;
    text-align: center;
    position  : absolute;
    right     : 2px;
    top       : 5px;
    padding   : 1px;
}
 
#gameOver{
    visibility: hidden;
    text-align: center;
    font-size: 80px;
    position: relative;
    top: 5%;
}
 
.dinosaur {
    background-image: url("tadpole.png");
    background-size : cover;
    width: 52px;
    height: 67px;
    position        : absolute;
    bottom          : 0;
    left            : 0%;
}
 
.obstacle {
    background-image   : url("dragon.png");
    width           : 115px;
    height             : 80px;
    background-size    : cover;
    position           : absolute;
    bottom             : 0;
    right              : 20%;
}
 
 
 
 
 
/* Jump UpWord the dinosaur  */
.dinoUp{
    animation: dinoUp 0.6s;
}
 
@keyframes dinoUp{
    0%{
        bottom: 0%;
    }
    50%{
        bottom: 50%;
        /* transform: rotate(180deg); */
 
    }
    75%{
        transform: rotate(45deg);
    }
    100%{
        bottom: 0%;
        }
}
 
 
/* Move the Obstacle  */
.dragon{
    animation: moveObstacle 5s linear infinite;
}
 
@keyframes moveObstacle{
     
    0%{
        /* transform: translateX(-100vw); */
        left: 100vw;
    }
    100%{
        left: -8vw;
    }
    
 
}
 
/* Throw Dino downward */
.throwDino{
    animation: throwDinoDown 1s linear;
}
@keyframes throwDinoDown{
     
    50%{
        bottom: 30%;
    }
    100%{
        bottom: -30%;
    }
    /* 0%{
        bottom: -30%;
    } */
}