:root {
    --chess-square: min(calc(((88vw - 2px) / 8)), 55px);
}

.chess-rules h2 {scroll-margin-top: 68px;}

.chess-rules h4 {
    display: flex;
    align-items: center;
    margin-top: 56px;
}

    .chess-rules h4 img {
        height: 50px;
    }

.example-board {
    border: 1px solid #000;
    border-collapse: collapse;
    margin: 16px auto;
    width: auto;
}

    .example-board tr {
        background: #e4c68e;
    }

        .example-board tr:nth-child(even) td:nth-child(2n+1), .example-board tr:nth-child(odd) td:nth-child(2n+2) {
            background: #a97337;
        }

        .example-board tr:hover {
            box-shadow: none;
        }

    .example-board td {
        padding: 0;
        width: var(--chess-square);
        height: var(--chess-square);
        text-align: center;
        line-height: 0;
        font-size: min(5vw, 1.9rem);
        color: #259f2d;
        text-shadow: 0 1px 2px #3a3a3a, 0 -1px 2px #3a3a3a;
    }

    .example-board img {
        height: calc(.8 * var(--chess-square))
    }

.move-overlay {
    display: grid;
    place-content: center;
    place-items: center;
}

    .move-overlay img, .move-overlay span {
        grid-row: 1;
        grid-column: 1;
    }