*{
    margin: 0;
    padding: 0;
}

body{
    /* background-color: aqua; */
    overflow: hidden;
}

.gamecontainer{
    width: 100%;
    height: 100vh;
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-image: url(bg.png);
}

.intro{
    filter:
    drop-shadow(2px 0 0 black)
    drop-shadow(-2px 0 0 black)
    drop-shadow(0 2px 0 black)
    drop-shadow(0 -2px 0 black);
    color: rgb(255, 128, 0);
    top: 20px;
    position: relative;
    justify-self: center;
    font-size: 40px;
    width: 600px;
}

.dev{
    filter:
    drop-shadow(1px 0 0 black)
    drop-shadow(-1px 0 0 black)
    drop-shadow(0 1px 0 black)
    drop-shadow(0 -1px 0 black);
    color: rgb(195, 32, 184);
    width: 300px;
    top: 20px;
    position: relative;
    text-align: right;
    padding-left: 1050px;
    font-size: 20px;
}

.gameOver{
    filter:
    drop-shadow(2px 0 0 black)
    drop-shadow(-2px 0 0 black)
    drop-shadow(0 2px 0 black)
    drop-shadow(0 -2px 0 black);
    color: red;
    visibility: hidden;
    position: relative;
    top: 80px;
    font-size: 80px;
    text-align: center;
}

#scorecount{
   
   
    width: 120px;
    top: 90px;
    font-size: 20px;
    
    position: relative;
    text-align: center;
    justify-self: center;
    border: 2px solid black;
    border-radius: 10px;
}




.dino{
    background-image: url(dino.png);
   
   filter:
    drop-shadow(2px 0 0 black)
    drop-shadow(-2px 0 0 black)
    drop-shadow(0 2px 0 black)
    drop-shadow(0 -2px 0 black);

    background-repeat: no-repeat;
    background-size: cover;
    width: 250px;
    height: 120px;
    position: absolute;
    bottom: 0;
    left: 80px;
}

.obstacle{
    filter:
    drop-shadow(2px 0 0 black)
    drop-shadow(-2px 0 0 black)
    drop-shadow(0 2px 0 black)
    drop-shadow(0 -2px 0 black);
    background-size: cover;
    background-image: url(dragon.png);
    width: 150px;
    height: 90px;
    position:absolute;
    right: 380px;
    bottom: 0;
}

.animatedino{
    animation: dino 0.6s linear;
}

@keyframes dino {
    0%{
        bottom: 0;
    }
    50%{
        bottom: 350px;
    }
    100%{
        bottom: 0;
    }

}

.animateobs{
    animation: animateobs 3s linear infinite;
}

@keyframes animateobs{
    0%{
        left: 100vw;
    }
    100%{
        left: -10vw;
    }
}