body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    transition: background-color 0.5s ease; /* Smooth transition for background color */
}

.color-code {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Position in the bottom left */
    font-size: 24px;
    padding: 10px;
    border-radius: 5px;
    color: black; /* Set text color to black */
    font-style: italic; /* Make the text italic */
}

.color-menu {
    position: fixed;
    top: 50px;
    left: 20px;
    background-color: lightgray; /* Light gray background */
    border-radius: 10px; /* Rounded edges */
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
    display: none; /* Initially hidden */
    max-height: 300px; /* Limit height */
    overflow-y: auto; /* Scroll if content overflows */
    width: 200px; /* Set a width for the menu */
}

.overlay {
    position: sticky; /* Make the overlay stick to the top */
    top: -10px; /* Adjust this value to move the overlay higher */
    background-color: lightgray; /* Match the background color */
    z-index: 1; /* Ensure it is above the list items */
    padding: 5px; /* Add some padding */
    width: 100%; /* Make the overlay full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

.counter {
    font-weight: bold; /* Make the counter text bold */
    margin-left: 10px; /* Space between button and counter */
}

.color-menu ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.color-menu li {
    padding: 5px; /* Add some padding */
    border-bottom: 1px solid #ccc; /* Add a separator */
}

.color-menu li:last-child {
    border-bottom: none; /* Remove separator for last item */
}

.timer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    font-size: 24px;
    padding: 10px;
    border-radius: 5px;
    color: black; /* Set text color to black */
    display: none; /* Initially hidden */
}

.upgrade-menu {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: lightgray; /* Light gray background */
    border-radius: 10px; /* Rounded edges */
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
    display: none; /* Initially hidden */
}

.upgrade-menu h3 {
    margin: 0; /* Remove default margin */
}

.upgrade-menu h4 {
    margin: 5px 0; /* Margin for the roll speed title */
}

#upgradeCost {
    margin: 10px 0; /* Margin for the upgrade cost */
}

/* Button styles */
button {
    background-color: #333; /* Dark gray background */
    color: white; /* White text color */
    border: 2px solid #ccc; /* Gray outline */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Padding for the button */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition for background color and border color */
    margin-top: 10px; /* Space above the button */
}

/* Button hover effect */
button:hover {
    background-color: #444; /* Slightly lighter dark gray on hover */
    border-color: #bbb; /* Lighter gray outline */
}

/* Button disabled state */
button:disabled {
    background-color: #666; /* Medium gray background for disabled button */
    border-color: #aaa; /* Lighter gray outline for disabled button */
}

/* Color box styles */
.color-box {
    display: inline-block; /* Make it inline-block to align with text */
    width: 16px; /* Width of the color box */
    height: 16px; /* Height of the color box */
    margin-right: 5px; /* Space between the box and the text */
    border: 1px solid #ccc; /* Optional border for the box */
    border-radius: 2px; /* Slightly rounded corners for the box */
}