html,body{
    width: 100%;
    height: 100%;
}
    

.canvas{
    width: 100%;
    height: 100%;
    border: 4px groove gray;
    background-color: powderblue;
    position: relative;
    padding: 0%;
    cursor: pointer;
    overflow: hidden;
    background: url(../img/bg.jpg) no-repeat center;
}

.ballon{
    background: url(../img/trump1.png) no-repeat center;
    position: absolute;
    width: 93px;
    height: 120px;
    margin: 0%;
    border-radius: 50%;
}

.ballon-red{
    background: url(../img/trump1.png) no-repeat center;
    background-size: 78px;
}
.ballon-yellow{
    background: url(../img/trump2.png) no-repeat center;
    background-size: 78px;
}
.ballon-green{
    background: url(../img/trump3.png) no-repeat center;
    background-size: 78px;
}

.ballon-black{
    background: url(../img/trump4.png) no-repeat center;
    background-size: 78px;
}

.dhaga{
}

.weapon {
    bottom: 0px !important;
    position: fixed;
    text-align: center;
    z-index: 10;
}

.weapon > img {
    bottom: 0px !important;
    position: fixed;
    width: 300px;
    margin-left: calc(60% - 150px);
}

.scorecard {
    width: 400px;
    margin-left: calc(50% - 200px);
    border: 3px solid blue;
    padding: 30px;
    color: blue;
    font-weight: bold;
    font-size: 30px;
    background-color: white;    
    margin-bottom: 20px;
}


.play {
    width: 400px;
    margin-left: calc(50% - 200px);
    border: 3px solid red;
    padding: 30px;
    color: red;
    font-weight: bold;
    font-size: 30px;
    background-color: white;
}