body {
    background-color: transparent; 
    color: #000000;
    font-family: Arial, sans-serif; /* Optional: setting a default font */
}

#photo-container {
    width: 100%;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: center;
}

#photo-canvas {
    width: 100%;
    height: auto;
}

.button-controls, .slider-controls {
    width: 100%;
    margin: 10px auto;  /* Centers the controls and adds spacing between them */
    display: flex;
    justify-content: center;
    align-items: center;
}

#photo-slider {
    flex-grow: 1; /* Allows the slider to expand and fill the space */
    margin: 0 10px; /* Adjust spacing around the slider */
}

button, select {
    padding: 10px 10px;
    margin: 10px 10px;
    font-size: 16px;
    background-color: #555; /* Darker background for buttons */
    color: #fff; /* Light text color for buttons */
    border: none; /* Remove default border */
    cursor: pointer; /* Pointer cursor on hover */
}

button:hover, select:hover {
    background-color: #777;
}

button:disabled, select:disabled {
    background-color: #444; /* Darker background for disabled buttons */
    color: #666; /* Greyed out text color for disabled buttons */
    cursor: not-allowed; /* Cursor indicates the button is not clickable */
}

select {
    margin: 0 5px;  /* Ensure some spacing around the dropdown */
}