#info, #goDisplay, h1 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;

    -khtml-user-select: none; /* stops it being highlightable */
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

#board {
    padding-left: 29%;
}

td {
    height: 5vw;
    width: 5vw;
    position: relative;
    text-align: center; 
}

td img {
    max-width: 100%;  
    max-height: 100%;  
    object-fit: contain; /* ensures the image scales within the td, maintaining aspect ratio */
    position: absolute; /* centering the image vertically */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* adjusting the image back to the center */

    -khtml-user-select: none; /* stops it being highlightable */
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    
}
.circles {
    mix-blend-mode: multiply;
}
.white {
    background-color: antiquewhite;
}
.black {
    background-color: rgb(71, 55, 37);
}

#goDisplay {
    font-size: 22px;
}

.promotions {
    background-color: rgba(207, 201, 185, 0.9);
    border: 1px solid black;
    border-radius: 5px;
    z-index: 1000; 
    position: absolute;
    padding: 5px;

    -khtml-user-select: none; /* stops it being highlightable */
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.promotions .option {
    width: 50px;
    height: auto;
    object-fit: contain;
    
    -khtml-user-select: none; /* stops it being highlightable */
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.option:hover {
    transform: scale(1.1);
}