.game-board {
    text-align: center;
}

table {
    overflow: hidden;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    border-spacing: 0;
}

.game-board-cell {
    border: solid 1px gray;
    font-size: 1em;
    text-shadow: 1px 1px 0 #000;
}

.game-size-choice {
    text-align: center;
}

.game-size-choice-button {
    font-size: 2rem;
    padding-bottom: 10px;
}

.mine-number-0 {
    color: #00DADF;
}

.mine-number-1 {
    color: #00DF6C;
}

.mine-number-2 {
    color: #009E4D;
}

.mine-number-3 {
    color: #5ADD00;
}

.mine-number-4 {
    color: #C1DD00;
}

.mine-number-5 {
    color: #DD9600;
}

.mine-number-6 {
    color: #DD2900;
}

.mine-number-7 {
    color: #DD00A6;
}

.mine-number-8 {
    color: #FFAFF6;
}

.small {
    height: 24px;
    width: 24px;
    min-width: 24px;
    min-height: 24px;
}

.large {
    height: 53px;
    width: 53px;
    min-width: 53px;
    min-height: 53px;
}

tr {
    padding: 0px;
    margin: 0px;
}

th {
    padding: 0px;
    margin: 0px;
    font-size: 8px;
}

td {
    position: relative;
    font-weight: bolder;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

    td:hover {
        font-weight: bold;
        border: solid 2px blue;
        color: blue;
    }

        td:hover::before {
            background-color: lightblue;
            content: '';
            height: 100%;
            left: -5000px;
            position: absolute;
            top: 0px;
            width: 10000px;
            z-index: -3;
        }

        td:hover::after {
            content: '';
            height: 10000px;
            left: 0;
            position: absolute;
            top: -5000px;
            width: 100%;
            z-index: -1;
            background-color: lightblue;
        }

th:hover {
    color: blue;
}

    th:hover::before {
        color: blue;
    }

    th:hover::after {
        color: blue;
    }

.square-uncovered-mine {
    background-color: red;
    border: 2px outset darkred;
}

.square-empty {
    background-color: #9F9F9F;
    border: 2px inset darkgrey;
}

.square-marked {
    background-color: darkslategrey;
    border: 2px outset #1cc8e0;
}

.lost-panel {
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    text-align: center;
    vertical-align: central;
    background-color: #ad5353;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    font-weight: bold;
}

.win-panel {
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    text-align: center;
    vertical-align: central;
    background-color: #009E4D;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    font-weight: bold;
}