.palette-container {
    background-color: #f9f9f9;
    /*display: flex;
    flex-wrap: wrap;*/
    /*gap: 8px;*/
    /*align-items: center;
    place-items:center;
    justify-content: center;*/
    padding: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*Subtle shadow */
    width: min(297mm, 85%);
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 20px 0;
}

.function-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    place-items: center;
    justify-content: center;
    padding: 10px;
    /*border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;*/
    /*width: min(297mm, 85%);*/
}



.function-button {
    margin:2px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #eee;
    cursor: pointer;
    font-size: 14px;
}

    .function-button:hover {
        background-color: #ddd;
    }

    .function-button:active {
        background-color: #ccc;
    }


.greek-palette {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    place-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.greek-button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #eee;
    cursor: pointer;
    font-size: 16px; /* Larger font for better visibility */
}

    .greek-button:hover {
        background-color: #ddd;
    }

    .greek-button:active {
        background-color: #ccc;
    }