/* game board table */

body {
    margin: 0;
    background: black;
}

#game {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
}

#board td {
    width: 50px;
    height: 50px;
    
    border: solid 1px #888;
    background: rgba(98, 80, 165, 0.2);
}

#board td.win {
    background: rgba(255, 255, 255, 0.2);
}

/* pieces are div within game table cells: draw as colored circles */

.piece {
    border-radius: 100%;
    margin: 5px;
    width: 80%;
    height: 80%;
}

.p1 {
    background: #f44;
}

.p2 {
    background: #44f;
}

/* column-top is table row of clickable areas for each column */

#column-top td {
    border: dashed 1px #ddd;
}

#column-top td:hover {
    background-color: rgba(255, 215, 0, 0.2);
    border: dashed 1px #fff;
}