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

.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 1px;
    background:url("assets/cell.png") no-repeat;
    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/flag.png") no-repeat;
}

.table-box.bomb {
    background:url("assets/mine.png") no-repeat;
}

.table-box.number {
    background:url("assets/0.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    border: inset white 1px;
    font-size: large;
    font-weight: bolder;
    font-family: Helvetica, sans-serif;
}

.table-box.number.one {
    background: url("assets/1.png") no-repeat;
    color: transparent;
}

.table-box.number.two {
    background: url("assets/2.png") no-repeat;
    color: transparent;
}

.table-box.number.three {
    background: url("assets/3.png") no-repeat;
    color: transparent;
}

.table-box.number.four {
    background: url("assets/4.png") no-repeat;
    color: transparent;
}

.table-box.number.five {
    background: url("assets/5.png") no-repeat;
    color: transparent;
}

.table-box.number.six {
    background: url("assets/6.png") no-repeat;
    color: transparent;
}

.table-box.number.seven {
    background: url("assets/7.png") no-repeat;
    color: transparent;
}

.table-box.number.eight {
    background: url("assets/8.png") no-repeat;
    color: transparent;
}

.timer-box {
    width: 50px;
    height: 10px;
    background: var(--empty-box);
    display: flex;
    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;
}

.mine-count {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#mineCounter {
    color: lightcoral;
    order: 1;
    opacity: 1;
}