body {
    background: url("./background.jpg") no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent scrolling */
}

#board {
    width: 90vw;
    /* Use viewport width for responsiveness */
    max-width: 450px;
    /* Maximum width to maintain design */
    height: 90vw;
    /* Keep the height proportional to width */
    max-height: 450px;
    /* Maximum height to maintain design */
    background-color: rgb(117, 220, 255);
    border: 5px solid slategray;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

#board img {
    width: 10vw;
    /* Use viewport width for responsiveness */
    max-width: 50px;
    /* Maximum width to maintain design */
    height: 10vw;
    /* Keep the height proportional to width */
    max-height: 50px;
    /* Maximum height to maintain design */
}

@media (min-width: 500px) {
    #board {
        width: 450px;
        /* Fixed size for larger screens */
        height: 450px;
    }
    #board img {
        width: 50px;
        /* Fixed size for larger screens */
        height: 50px;
    }
}