style.css

/*
    make html element into 100% height "flex" element so we can more
    easily center the board & title
*/
html {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: Helvetica, Arial, sans-serif;
}

/*
    The title for our game
*/
.title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 30px;
}

/*
    The announcement for a winner
*/ 
.winner {
    text-align: center;
    margin-top: 30px;
    font-size: 30px;
    height: 30px;
    color: orange;
    font-weight: bold;
}

/*
    a "cell" in our game is a single square
*/
.board-cell {
    display: table-cell;
    border: 1px solid darkgray;
    height: 100px;
    width: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 60px;
    font-weight: bold;
}

/*
    Remove the top border from all cells in the first row
*/
.board-row:first-child .board-cell {
    border-top: 0;
}

/*
    Remove the bottom border from all cells in the last row
*/
.board-row:last-child .board-cell {
    border-bottom: 0;
}

/*
    Remove the left border from all first cells in each row
*/
.board-row .board-cell:first-child {
    border-left: 0;
}

/*
    Remove the right border from all last cells in each row
*/
.board-row .board-cell:last-child {
    border-right: 0;
}