body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#toolbar, #button-container {
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#toolbar select {
    padding: 10px;
    margin: 0 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.art-category-button {
    padding: 10px 20px;
    margin: 5px;
    border: 2px solid #333;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    text-decoration: none; /* Removes underline */
    display: inline-block; /* Ensures proper padding and height */
}

.top-bar {
    display: flex;
    justify-content: center; /* Centers the items horizontally */
	background-color: #000000;
    padding: 20px 0; /* Adds some padding above and below the logo */
}

.top-bar img.logo {
    max-width: 60px;
    margin-right: 20px; /* Adjust the space between logo and text links */
    align-self: center; /* Aligns the logo vertically within the .top-bar */
}



#button-container select {
    cursor: pointer;
    font-weight: bold; /* Match button font weight */
    color: #333; /* Match button text color */
    background-color: #fff; /* Match button background color */
    border: 2px solid #333; /* Match button border */
    border-radius: 5px; /* Match button border radius */
    padding: 10px 20px; /* Adjust padding to match button */
    margin: 5px; /* Match button margin */
    appearance: none; /* Remove default styling */
    -moz-appearance: none;
    -webkit-appearance: none; /* Necessary for some browsers */
    transition: all 0.3s ease; /* Smooth transition for visual feedback */
    font-size: 16px; /* Example font size - adjust as necessary to match your buttons */
}


/* To visually indicate dropdown is active/hovered */
#button-container select:hover {
    background-color: #333;
    color: #fff;
}

#button-container .art-category-button:hover, #button-container .art-category-button.toggled {
	    border-radius: 30px; /* Adjusted for toggled state */
    background-color: #333;
    color: #fff;
    font-weight: bold;
}

.audio-info p {
    font-weight: bold; /* Makes the font bold */
    font-size: 18px; /* Increases the font size to 18px; adjust as needed */
    /* Add any additional styling here */
}

/* Customizes the scrollbar track */
::-webkit-scrollbar-track {
    background: #f4f4f4; /* Match the page background or any color you want for the track */
}

/* Customizes the scrollbar thumb (the part that you drag) */
::-webkit-scrollbar-thumb {
    background: #000000; /* Completely black as requested */
    border-radius: 10px; /* Optional: adds rounded corners to the scrollbar thumb */
}

/* Customizes the overall scrollbar width and height */
::-webkit-scrollbar {
    width: 8px; /* Width of the vertical scrollbar */
    height: 8px; /* Height of the horizontal scrollbar */
}

/* For Firefox */
* {
    scrollbar-color: #000000 #f4f4f4; /* thumb and track */
    scrollbar-width: thin; /* Can be "auto", "thin", or "none" */
}




#content {
    padding: 20px;
    background-color: #f4f4f4;
}

#all-art {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adjusts space between items */
	    align-items: center; /* Aligns items vertically, optional based on your design */

}

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 10px; /* Adds space between rows */
}

.layout-1 .image-container { flex: 0 0 100%; }
.layout-2 .image-container { flex: 0 0 49%; }
.layout-3 .image-container { flex: 0 0 32%; }
.layout-4 .image-container { flex: 0 0 24%; }
.layout-5 .image-container { flex: 0 0 19%; }


.image-container img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.image-container img:hover {
    transform: scale(1.05); /* Scale up the image on hover */
}

#image-overlay {
    position: fixed; /* Full-screen overlay */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9); /* Black background with opacity */
    z-index: 2; /* Ensure it's above everything else */
    cursor: pointer;
}

#close-overlay {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 30px;
            cursor: pointer;
            color: white; /* Make the X button white */
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Optional: adds a shadow for better visibility */
        }


.audio-info {
    text-align: center;
    padding: 10px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}