body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background-color: rgb(150,150,150);
}

#main {
    box-sizing: border-box;
    text-align: center;
}

#game-top {
    text-align: right;
    box-sizing: border-box;
}

#mineDisplay {
    box-sizing: content-box;
    margin: 20px;
    padding: 5px;
    color: rgb(150,0,0);
    background-color: rgb(140,140,140);
    border: 5px inset rgb(120,120,120);
    border-bottom: rgb(140,140,140);
    font-size: 50px;
}

#game {
    margin: 5px;
    display: flex;
    flex-wrap: wrap;
    border: 5px inset rgb(120,120,120);
}

.grid-square {
    box-sizing: border-box;
    cursor: pointer;
    
    user-select: none;
    -moz-user-select: none;
    -webkit-text-select: none;
    -webkit-user-select: none;
}

.open {
    border: 2px inset rgb(130,130,130);
    background-color: rgb(150,150,150);
    color: rgb(0,0,0);
    font-size: 200%;
    text-align: center;
    font-weight: 900;
}

.num-1 {
    color: green;
}
.num-2 {
    color: blue;
}
.num-3 {
    color: red;
}
.num-4 {
    color: purple;
}
.num-5 {
    color: yellow;
}
.num-6 {
    color: orange;
}
.num-7 {
    color: teal;
}
.num-8 {
    color: magenta;
}

.mine {
    background-color: rgb(150,0,0);
}

.covered {
    background-color: rgb(150,150,150);
    border: outset rgb(130,130,130);
    color: transparent;
}

.marked {
    background-color: rgb(255,0,0);
    color: transparent;
    border: outset rgb(100,100,100);
}

button {
    position: relative;
    font-size: 25px;
    border: 5px outset rgb(120,120,120);
    background-color: rgb(160,160,160);
}
button:active {
    top: 1px;
    left: 1px;
    border: 5px inset rgb(120,120,120);
    background-color: rgb(100,100,100);
}