/*
 ©Copyright 2026 MetaDJ.live - Proprietary and Confidential
*/

.scroll-section {
   margin: 1px;
}
.scroll-section h2 {
   text-align: center;
   margin-bottom: 5px;
   font-family: Verdana, sans-serif;
   font-size: 1rem;
   color: #000;
   text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0px 0px 6px #ffffff,  0px 0px 8px #ffffff;
}
.scroll-row {
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: smooth;
   padding: 5px;
   background-color: #000000ab;
   border-radius: 8px;
}
.scroll-row::-webkit-scrollbar {
   height: 3px; /* Visible scrollbar */
}
.scroll-row::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 4px;
}
.scroll-box {
   height: 251px;
   width: 210px;
   margin-right: 10px;
   background-color: rgba(66, 66, 66, 0.85);
   border: 3px solid #444;
   border-radius: 8px;
   color: black;
   text-align: center;
   transition: transform 0.3s;
   aspect-ratio: 1 / 1; /* Maintains a square shape */
}
.scroll-box img {
   width: 100%;
   height: auto; /* Maintain aspect ratio of the image */
   object-fit: cover;
}
.scroll-box a {
   color: black;
    text-decoration: none;
    cursor: pointer;
}
.scroll-box a:hover {
   color: white;
   text-shadow: 0 0 3px #000000, 0 0 4px #000000, 0px 0px 5px #000000,  0px 0px 6px #000000;
}
.scroll-box-info {
   padding: 5px;
   background-color: rgba(88, 88, 88, 0.85);
   font-family: Verdana, sans-serif;
   font-size: 12px;
   font-weight: bold;
   border-radius: 8px;
}

.alphabet {
   margin: 2em 0;
   text-align: center;
}
.alphabet a {
   color: black;
   text-decoration: none;
}
.alphabet a:hover {
   color: white;
   text-shadow: 0 0 3px #000000, 0 0 4px #000000, 0px 0px 5px #000000,  0px 0px 6px #000000;
}
.alphabet-row {
   padding: 5px;
   background-color: #000000ab;
   border-radius: 8px;
}
.alphabet-row a {
   margin: 1px;
   color: white;
   font-size: 10px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 0 3px #000000, 0 0 4px #000000, 0px 0px 5px #000000,  0px 0px 6px #000000;
}
.alphabet-row a:hover {
   color: black;
   font-weight: bold;
   font-size: 11px;
   text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0px 0px 6px #ffffff,  0px 0px 8px #ffffff;
}
.user-link, .artist-link, .playlist-link {
    color: black;
    font-size: 12px;
    font-weight: bold;
   text-decoration: none;
}
.user-link:hover, .artist-link:hover, .playlist-link:hover {
   color: white;
   text-shadow: 0 0 3px #000000, 0 0 4px #000000, 0px 0px 5px #000000,  0px 0px 6px #000000;
}