body{
        background: #fff;
}
#body-block{    overflow: auto;width: 100%;}


.highscore{    padding: 0px 4px;
    font-weight: 900;
    color: #66cdaa;
}
@keyframes miniBounce {
    0%{ -webkit-transform:translateY(0px) rotate(-45deg);}
    30%{ -webkit-transform:translateY(-20px) rotate(-45deg);}
    60%{ -webkit-transform:translateY(0px) rotate(-45deg);}
    70%{ -webkit-transform:translateY(-5px) rotate(-45deg);}
    100%{ -webkit-transform:translateY(0) rotate(-45deg);}
}

.bounce-update{
  animation: miniBounce 0.4s ease-in-out; 
}


.newGame{  }

#msg-box{
    padding: 10px 0;
    font-weight: 900;}

.minesweeper
{
       width: 296px;
    
    margin: auto;margin-top: 100px;

}

.instruction h3{    color: #639;}



.miner-modal{}
.miner-modal .card-body{    height: 100%;
    /*background: #031b9e;*/
}

.miner-modal audio{    text-align: center;
    width: 100%;
    /* height: 50%; */
    border: 0;}

.board
{
    width: initial;
    margin-top: 10px;
    /* border: 1px outset #666; */
    /* box-shadow: 4px 4px 4px #aaa; */
}

.field
{
    width: 40px;
    height: 40px;
    border: 1px inset #332323;
    float:left;
    
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    
    background-color: #fff;
    color: #000;
    font-weight: bold;
}

.field.hidden.flag { background: #eee url('../icons/favicon.ico') center no-repeat !important; }

.field.hidden.flag > span { display: none; }

.field.mine { background: url('../icons/mine.png') center no-repeat; }

.field.mine > span { display: none; }

.field.hidden
{
    background-image:none !important;

    background-color: #949090 !important;
    background-color: #332323 !important;

    color: #eee !important;
}

.field.hidden > span { display: none !important; }

.clear { clear: both; }

.instruction{
        width: 296px;
    margin: auto;
    margin-top:50px;
}

@media screen and (max-width:900px) {

    .col-6 {
        width: 100%;
    }

    .minesweeper{
        margin-top:50px;
    }
}