*
{
    margin: 0;
    padding: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');
body
{
    height: 100vh;
    width: 100vw;
    background-image: url('./assets/kshitiz.jpg');
    background-size: cover;
}


.gameDiv
{
    height: 600px;
    width: 1000px;
    box-shadow: 0px 0px 20px #00000080;
    background-color: #9696967a;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    overflow: hidden;
}
.player
{
    height: 100px;
    width: 100px;
    filter: drop-shadow(0 0 5px #000000a6);
    -webkit-filter: drop-shadow(0 0 5px #000000a6);
    position: relative;
    transition: top 10ms;
    transition: left 80ms;
    z-index: 2;

}
.gameDiv h2
{
    position: absolute;
    color: white;
    font-family: 'Modak', cursive;
    left: 20px;
    top: 20px;
}
.bullet
{
    height: 15px;
    width: 15px;
    position: absolute;
    background-color: #89ff00;
    box-shadow: 0px 0px 6px 1px black;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 50px;
}

.bubble
{
    position: absolute;
    height: 50px;
    width: 50px;
    transform: translate(-50%, -50%);
}

div.bubbleReached
{
    animation-name: bubble;
    animation: bubble 1s;
}

@keyframes bubble
{
    0%{
        box-shadow: 0px 0px 20px #00000080;
    }
    25%{
        box-shadow: 0px 0px 50px #ff0101;
    }
    50%{
        box-shadow: 0px 0px 20px #00000080;
    }
    75%{
        box-shadow: 0px 0px 50px #ff0000;
    }
    100%{
        box-shadow: 0px 0px 20px #00000080;
    }
}