:root {
    --body-background-color: #aaaaaa;
    --light-square-background-color: #ddddbb;
    --dark-square-background-color: #779900;
    --square-mark-color: yellow;
}

body {
    margin: 0px;
    background-color: var(--body-background-color);
}

/* board */

#game_content {
    display: flex;
}

#board {
    width: 90vh;
    margin:20px;
}

#chessboard-svg {
    box-shadow: 0 0 20px 0px black;
}

#side-pannel {
    margin: 20px;
}

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

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

.marked {
    fill: var(--square-mark-color);
}


/* pieces */

.piece {
    pointer-events: none; /* Let the mouse click to the square by ignoring pieces. */
}