/*CSS Reset*/
*{
    margin:0px;
    padding:0px;
}
body{
    /*Hides the  bottom scrollbar*/
    overflow: hidden;
}
/*Styling of the Game's Name*/
#gameName{
    position: absolute;
    left: 24vw;
    background-color: white;
    font-weight: bold;
    font-size: 4rem;

}
/*Background image styling*/
.container{
    background-image: url(./images/cover.png);
    background-size:cover;
    width:100vw;
    height:100vh;
}

.design {
    position:absolute;
    top: 109px;
    right: 57px;

    background-color: black;
    padding: 10px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
}

/*ScoreCard Styling*/
#scorecount{
    position:absolute;
    top:20px;
    right:20px;
    background-color: black;
    padding: 28px;
    border-radius: 20px;
    color: white;
}
/*Obstacle image styling and postioning*/
.obstacle{
    background-image: url(./images/obstacle.png);
    background-size: cover;
    width:154px;
    height: 117px;
    position:absolute;
    bottom:0px;
    right:120px;
}
/*Applying aniamation to the obstacle so that it can move towards left*/
.animateobstacle{
    animation: aniob 5s linear infinite;
}
@keyframes aniob{
    0%{
        left:100vw;
    }
    100%{
        left:-10vw;
    }
}
/*Dragon's styling*/
.dragon{
    background-image: url(./images/dragon.png);
    background-size: cover;
    width: 194px;
    height: 101px;
    position:absolute;
    bottom:0px;
    left:90px;
}
/*Applying animation to the dragon so that it can save himself by jumping up*/
.animatedragon{
    animation: ani 1s linear;
}
@keyframes ani{
    0%{
        bottom:0px;
    }
    25%{
        bottom:150px;
    }
    50%{
        bottom:300px;
    }
    75%{
        bottom:211px;
    }
    100%{
        bottom:0px;
    }
}
/*gameover styling and positioning*/
.gameover{
    visibility: hidden;
    font-family: 'Ubuntu', sans-serif;
    position:absolute;
    top:50vh;
    left:35vw;
    color:red;
    font-weight:bold;
    font-size: 6rem;
    background-color: firebrick;
    border-radius: 20px;
}