*{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
body{
    height: 100%;
    width: 100%;
    background-image: linear-gradient(25deg, orange,skyblue);
}

#game{
    width: 300px;
    height: 500px;
    border: 1px solid rgba(233, 233, 233, 0.507);
    margin: auto;
    margin-top: 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 10px;
}

#character{
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    background-image: url(img/ennemy.png);
    background-size: cover;
    position: relative;
    top: 400px;
    left: 100px;
    border-radius: 5px;

}

#block{
    width: 100px;
    height: 100px;
    background-color: black;
    background-image: url(img/bullet.png);
    background-size: cover;
    position: relative;
    animation: slide 2s infinite;
    border-radius: 5px;
}

/* moving block  */
@keyframes slide{
    0%{top: -150px;}
    100%{top: 700px;}
}

/* top hide the overflow  */
#white{
    width: 300px;
    height: 110px;
    position: absolute;
    top: 510px;
    background-color: transparent;
    background-image: linear-gradient(25deg, orange,skyblue);
    z-index: 99999;

}
#start {
    text-decoration: none;
    text-transform: capitalize;
    padding: 8px 12px;
    border: 1px solid green;
    background-color: green;
    color: white;
    border-radius: 3px;
    transition: ease all 0.4s;
    cursor: pointer;
}

#start:hover{
    background-color: transparent;
    color: green;
}
/* for smartphone touchscreen  */

#left,#right{
    width: 50%;
    position: absolute;
    height: 500px;

}
#right{
    left: 50%;

}