.board_description {
    color: rgb(50, 30, 5);
    font-weight: bold;
    font-size: 200%;
    margin-bottom: 5px;
}

.chess_board {
    border: 1px solid;
    width: 80vw;
    max-width: 90vh;
    aspect-ratio: 1;

    /* Centralises the board in terms of width. */
    margin: 0 auto;

    /* Maximale Breite: 90% des Viewport */

}

.white_square {
    border: 0px solid;
    background-color: white;
    /* Each square should fill 1/8 of the area. */
    width: calc(90% / 8);
    padding-bottom: calc(90% / 8);
    position: relative;
    overflow: hidden;
    /* Prevent padding from influencing the overall size of the square.*/
    box-sizing: border-box;
}

.black_square {
    border: 0px solid;
    background-color: rgb(134, 102, 73);
    /* Each square should fill 1/8 of the area. */
    width: calc(90% / 8);
    padding-bottom: calc(90% / 8);
    position: relative;
    overflow: hidden;
    /* Prevent padding from influencing the overall size of the square.*/
    box-sizing: border-box;

}

.quad_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Scale image without scaling the square size.*/
    display: block;
}