php-chess/html/static/styles.css

* {
    box-sizing: border-box;
}

.board {
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

.square {
    width: 12.5%;
    height: 12.5%;
    position: relative;
}

.square.black {
    background-color: brown;
}

.square.white {
    background-color: lightgoldenrodyellow;
}

.square.movePossible:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background: green;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.square.white.lastMove {
    background-color: lightgreen;
}

.square.black.lastMove {
    background-color: yellowgreen;
}

.board.interactive:not(.moveSelection) .square.black.hasMoves .doesnotexist, .square.black.source {
    background-color: green;
}

.board.interactive:not(.moveSelection) .square.white.hasMoves .doesnotexist, .square.white.source {
    background-color: mediumseagreen;
}

.piece {
    width: 100%;
    height: 100%;
    position: relative;
}

.piece img {
    width: 100%;
    z-index: 10;
}