body {
    margin: 5vh;
    height: 90vh;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    font-family: Arial, sans-serif;
}

canvas {
    max-height: 70vh;
    text-align: center;
}

#control-panel {
    text-align: center;
    margin-bottom: 20px;
}

#control-panel button {
    background-color: #888; /* Dark gray background */
    color: white; /* White text */
    border: none; /* No borders */
    padding: 10px 20px; /* Padding inside the button */
    margin: 0 10px; /* Horizontal spacing between buttons */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    outline: none; /* Removes the outline */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effect */
    font-weight: bold; /* Makes the text bold */
    font-size: 16px; /* Adjust text size */
}

#control-panel button:hover {
    background-color: #666; /* Slightly lighter gray on hover */
    transform: scale(1.05); /* Slightly enlarges the button on hover */
}

#control-panel button:focus {
    background-color: #333; /* Even darker color when focused */
}

#control-panel button.active {
    background-color: #333; /* Darker background for active button */
}

#gradientKey {
    text-align: center;
    margin-bottom: 10px;
}

#colorGradientBar {
    width: 95%;
    height: 20px;
    background: linear-gradient(to right, hsl(210, 75%, 75%), hsl(210, 50%, 25%));
    border-radius: 5px;
    margin: 0 auto;
}

#gradientLabels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

#gradientLabels span {
    font-size: 12px;
    color: #333; /* Adjust text color for visibility */
}