body {
    background-color: rgb(45, 45, 45);
}

h1 {
    color: white;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

#column-top td:hover {
    background-color: rgb(183, 234, 201);;
}
  
#game {
    background: rgb(0, 115, 255);
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translate(-50%);
    padding: 25px;
    border-radius: 10%;
}

/* game board as a table */
#board td {
    width: 50px;
    height: 50px;
    border: solid 1px #666;
    border-radius: 40%;
    background-color: white;
}

/* top row */
#column-top td {
    /* border: dashed 1px lightgray; */
    border: dotted 2px rgb(168, 168, 168);
}

/* pieces are colored circles */
.piece {
    margin: 1px;
    width: 95%;
    height: 95%;
    border-radius: 40%;
}
.piece.p1 {
    background-color: rgb(0, 0, 255);
}
.piece.p2 {
    background-color: rgb(255, 0, 0);
}



.reset {    
    position: relative; 
    /* make reactive to page size */
    top: 550px;
    left: 50%;
    transform: translate(-50%);
}

#head1 {
    color: rgb(0, 115, 255);
}