game-style.css

:root {
    --box-sizeX: 25px;
    --box-sizeY: 25px;
}

.game {
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    transition: padding-bottom .4s ease-in-out, padding-top .4s ease-in-out;
}
.table {
    width: 100%;
    height: 100%;
    display: grid;
    justify-content: center;
    align-content: center;
}

.table-line {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: right;
    align-content: center;
}

.table-box {
    width: var(--box-sizeX);
    height: var(--box-sizeY);
    border: outset white 3px;
    background: var(--empty-box);
    transition: height .4s ease-in-out, width .4s ease-in-out, border .3s ease-in-out;
}

.table-box.animation {
    width: 0;
    height: 0;
    border: outset white 0px;
}

.table-box.hovered {
    background: white;
}

.table-box.flag {
    background: red;
    background:url("assets/images/flag.png") no-repeat;
}

.table-box.bomb {
    /*background: blue;*/
}

.table-box.number {
    background: var(--filled-box);
    display: flex;
    justify-content: center;
    align-items: center;
    border: inset white 3px;
    font-size: large;
    font-weight: bolder;
    font-family: Helvetica, sans-serif;
}

.table-box.number.one {
    color: #263bc7;
}

.table-box.number.two {
    color: #1fa141;
}

.table-box.number.three {
    color: #d42433;
}

.table-box.number.four {
    color: #550f8a;
}

.table-box.number.five {
    color:#9c0b4a;
}

.table-box.number.six {
    color: #068a7f;
}

.table-box.number.seven {
    color: #004506;
}

.table-box.number.eight {
    color: #3f0052;
}

.timer-box {
    width: 50px;
    height: 100%;
    background: var(--empty-box);
    display: grid;
    justify-content: center;
    align-content: center;
    align-self: center;
    transition: height .3s ease-in-out, font-size .3s ease-in-out;
}

.timer-box.animation {
    height: 0;
    font-size: 0;
}

.timer {
    width: auto;
    height: 100%;
    margin: 5px;
}