body {
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

canvas {
    border: 2px solid white;
    background-color: black;
}

/* Category Buttons */
.category-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    gap: 10px; /* Space between buttons */
}

.category-tab {
    padding: 10px 20px;
    background-color: #444; /* Dark gray background */
    color: white; /* White text */
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Slightly rounded corners */
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-weight: bold; /* Make the text bold */
}

.category-tab:hover {
    background-color: #555; /* Slightly lighter gray on hover */
}

.category-tab.active {
    background-color: #666; /* Even lighter gray for active tab */
}

/* Item Containers */
.items-container {
    width: 950px; /* Same as canvas width */
    background-color: #333; /* Dark background for items container */
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align items to the start */
    gap: 3px; /* Reduced gap for tighter grid */
}

.item-content {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px; /* Reduced gap for tighter grid */
    width: 100%; /* Ensure it takes full width */
}

.item-content.active {
    display: flex;
}

/* Item Buttons */
.item-content button {
    width: 120px; /* Fixed width */
    height: 40px; /* Fixed height */
    padding: 0; /* Remove padding */
    background-color: #7289da; /* Changed button color to a blue tone, you can change this to any color you like */
    color: white; /* White text */
    border: none;
    cursor: pointer;
    border-radius: 5px; /* Slightly rounded corners */
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-weight: bold; /* Make the text bold */
    text-align: center;
    font-size: 15px; /* Smaller font size */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for long text */
}

.item-content button:hover {
    background-color: #677bc4; /* Slightly lighter blue on hover */
}

.item-content button:active {
    transform: scale(0.95); /* Slight scale effect on click */
}

#heatSection {
  margin-bottom: 10px; /* Add some space below the HEAT section */
  padding: 5px;
  border-bottom: 1px solid #ccc; /* Add a divider */
}

#heatButton {
  background-color: rgb(255, 100, 0); /* Set a hot orange color */
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
}