body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    overflow: auto; /* Adjusted overflow for better content visibility */
}

h1 {
    margin-top: 20px;
    color: #333;
}

#cooldown-message {
    color: red;
    margin: 10px 0;
    font-weight: bold;
}

.hidden {
    display: none;
}

#palette {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#palette div {
    width: 30px;
    height: 30px;
    margin: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
}

#canvas {
    display: grid;
    grid-gap: 1px; /* Keeps the spacing between pixels */
    margin: 0 auto;
    width: 100vw;
    height: calc(100vh - 150px); /* Adjust for header and palette height */
    box-sizing: border-box;
    grid-template-columns: repeat(auto-fill, 10px); /* Set pixel width */
    grid-template-rows: repeat(auto-fill, 10px); /* Set pixel height */
}

#canvas div {
    background-color: #FFFFFF;
    width: 10px;  /* Explicitly set pixel size */
    height: 10px; /* Explicitly set pixel size */
    cursor: pointer;
    border: 1px solid #333; /* Dark grey border between pixels */
}

.active {
    border: 3px solid black !important;
}