:root {
    --square-size: 45px;
    --dark: #d18b47;
    --light: #ffce9e;
}

html,
body {
    font-family: 'Courier New', Courier, monospace;
}

header {
    text-align: center;
}

.chessboard {
    display: grid;
    padding: .5em;
    grid-template-rows: repeat(8, var(--square-size));
    grid-template-columns: repeat(8, var(--square-size));
    justify-content: center;
    transform-origin: top center;
}


.square {
    max-width: var(--square-size);
    height: var(--square-size);
    text-align: end;
    font-size: xx-small;
    user-select: none;
    background-size: contain;
    background-repeat: no-repeat;
}

.square:hover {
    opacity: .85;
}

.black {
    background-color: var(--dark);
}

.white {
    background-color: var(--light);
}

.square--selected {
    background-color: tomato;
}