*{
    margin:0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Roboto Mono', monospace;
}
body.lose{
    background-color:#ecc8cf;
}
.cell {
    --size:40px;
    width:var(--size);
    height:var(--size);
    background-color:lightgrey;
    line-height: calc(var(--size) - 6px);
    text-align: center;
    vertical-align: middle; 
    font-weight:bold;
    color:blue;
    user-select: none;
    cursor: pointer;
    border: 3px inset grey;
    border-left:3px inset lightgray;
    border-top:3px outset lightgray;
    border-radius:3px;

    

}
 
.cell.has-1-bombs { color: blue; }
.cell.has-2-bombs { color: green; }
.cell.has-3-bombs { color: red; }
.cell.has-4-bombs { color: purple; }
.cell.has-5-bombs { color: darkred; }
.cell.has-6-bombs { color: yellow; }
.cell.has-7-bombs { color: black; }
.cell.has-8-bombs { color: coral; }


.row{   
    display: flex;
    gap:5px;
}

#controls{
    display:flex;
    flex-direction: row;
    gap:50px;
}


button#reset{
    padding: 8px;
}

button#flag-mode{
    padding: 8px;
}



#grid{
    display: flex;
    gap:5px;
    flex-direction: column;
    border-top: 20px;
    border-color: blue;

}

#content{
    width: 100%;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
}

.empty{
    background-color: rgb(148, 139, 139);
}