*{
    background-color: RGB(50, 50, 50);
    box-sizing: border-box;
}
:root {
    --cell-size: 75px;
    --coin-size: 65px;
    --board-color: RGB(50, 50, 50);
    --boardlooper: RGB(65, 46, 26);
    --blackCoin: black;
    --whiteCoin: white;
}


body {
    margin: 0;
    width: 100vw;
    height: 100hv;
}
.cell.whiteCoin {
    background-color: var(--whiteCoin) !important;
    color: white !important;
}

.cell.blackCoin {
    background-color: var(--blackCoin) !important;
    color: black !important;
}
.whiteCoin,
.blackCoin {
    width: var(--coin-size);
    height: var(--coin-size);
    content: "";
    border-radius: 50%;
}
#board {
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(8,auto);
}
#board div:nth-child(-2n+8),
#board div:nth-child(8)~div:nth-child(-2n+15),
#board div:nth-child(16)~div:nth-child(-2n+24),
#board div:nth-child(24)~div:nth-child(-2n+31),
#board div:nth-child(32)~div:nth-child(-2n+40),
#board div:nth-child(40)~div:nth-child(-2n+47),
#board div:nth-child(48)~div:nth-child(-2n+56),
#board div:nth-child(56)~div:nth-child(-2n+63) {
    background-color: var(--boardlooper);
}


.cell {
    border: 1px solid black;
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: var(--board-color);
}
.cell.blackCoin:hover::before,
.cell.blackCoin:hover::after {
    background-color: pink;
}