*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px red solid;
}

body{
    margin: 0;
    width: 100%;
    min-height: 100%;
}

.board {
    width: 800px;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

.square {
    list-style: none;
    background: #eedc97;
    display: flex;
    justify-content: center;
    align-items: center;
}

.square.dark-square {
    background: #964d22;
}

.piece {
    width: 80%;
    height: 80%;
    border-radius: 50%;
}

.white-piece {
    background: white;
}

.black-piece {
    background: black;
}

.selected {
    border: 2px solid blue;
}

.potential-move {
    background: lightgreen !important;
    cursor: pointer;
}

.potential-capture {
    background: darkred !important;
    cursor: pointer;
}