/* Sound Styles */
#sounds {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 35px;
}

.sound-item {
    text-align: center;
}

.sound-item img {
    width: 125px;
    height: 125px;
    cursor: pointer;
}

.sound-item input[type="range"] {
    width: 100%;
    margin-top: 20px;
}



/* Add a class for the playing sound item */
.playing {
    background-color: rgba(51, 47, 42, 0.555); /* Background color with transparency */
    border: 1px solid rgba(165, 86, 218, 0.418); /* Lighter glow effect */
    box-shadow: 0 0 3px rgba(165, 86, 218, 0.658); /* Lighter glow effect */
    transform: scale(1.05); /* Slightly scale up the playing sound item */
    transition: background-color 0.3s, border 0.3s, transform 0.3s; /* Add smooth transitions */
}



/* Style the Filter Configuration buttons */
#filterConfig {
    background-color: #ffffff00;
    color: #fff;
    padding: 5px 5px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
/* Media query for screens with a maximum width of 768px (adjust as needed) */
@media screen and (max-width: 768px) {
    #filterConfig {
        margin-bottom: 10px; /* Increase the margin between buttons on smaller screens */
    }
}

/* Style the custom scrollbar for the iframe */
.iframe-class {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #8703a1 #000000; /* Scrollbar handle and track colors */
    overflow-y: scroll; /* Enable scrolling */
}