html, body {

    padding: 0; /* Ensure no padding on the body */
    width: 100%; /* Ensure body takes full width */
    height: 100%; /* Ensure body takes full height */
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    overflow: hidden;
    background-color: #f6f6f6; /*f6f6f6*/
    user-select: none;
    transition: background-color 1s, color 1s;
}


.sitebody {
    transform: scale(0.9);
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
    padding-top: 50px;
    min-height: 100vh; /* Ensures the body takes up at least the full height of the viewport */
    position: relative; /* Allows absolute positioning for the containers */
    flex-direction: column; /* Stack the containers vertically if you want */
    width: 100%; /* Ensures the full width */
    overflow: hidden; /* Prevents overflow if you want to keep the layout neat */
}


.container, .container-playlist {
    position: absolute; /* Allows them to overlap */
    
    background: #f7f7f7;
    

}

.container{
    border-radius: 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 422.5px;
    height: 517.5px;
    top: 100px; /* Adjust vertical position */
    left: 80px; /* Adjust horizontal position */
    box-shadow: 0px 0px 30px rgb(169, 169, 169);
    z-index: 5;
    transition: background-color 1s, color 1s;

    border-left: 0.2px solid #aaaaaa;
    border-top: 0.2px solid #aaaaaa;
    border-right: 0.2px solid #aaaaaa;
}



.container-playlist {

    margin-bottom: 20px;
    width: 539px;
    height: 581px;
    top: -350px; /* You can adjust this for overlap */
    right: -600px; /* You can adjust this for overlap */
    z-index: 0; /* Lower z-index to sit behind the container */
    overflow-y: auto; /* Adds vertical scrolling */
    overflow-x: hidden; /* Ensures horizontal overflow is hidden (if any) */
    display: flex;
    flex-wrap: wrap; /* Items will wrap to the next line */
    justify-content: space-between; /* Space out the items evenly */
    gap: 3px; /* Adds space between the items */
    padding: 16px;
    border-bottom-right-radius: 15px;
    box-shadow: 10px 0px 30px rgb(169, 169, 169);
    transition: background-color 1s, color 1s;


    border-right: 0.2px solid #aaaaaa;
    border-bottom: 0.2px solid #aaaaaa;
}

#albumArt{
    box-shadow: 0px 0px 10px rgb(135, 135, 135);
}


.container #topbrowserbar{
    background:#e9e9e9; /* e9e9e9 */
    position: absolute;
    z-index: 3;
    height: 45px;
    width: 422.5px;
    top: 0;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    transition: background-color 1s, color 1s;

    border-left: 0.2px solid #aaaaaa;
    border-top: 0.2px solid #aaaaaa;
    border-right: 0.2px solid #aaaaaa;
    
}

#topbrowserbar-playlist{
    background:#e9e9e9; /* e9e9e9 */
    position: absolute;
    z-index: 6;
    height: 65px;
    width: 162px;
    top: -415px;
    left: -135px;

    border-left: 0.2px solid #aaaaaa;
    border-top: 0.2px solid #aaaaaa;
    border-right: 0.2px solid #aaaaaa;
    border-top-left-radius: 15px;
    transition: background-color 1s, color 1s;
    

}


#browserdot1{
    height: 14px;
    width: 14px;
    position: absolute;
    top: 15px;
    left: 35px;
    background: #ed6b5e; 
    z-index: 5;
    border-radius: 20px;
}
#browserdot2{
    height: 14px;
    width: 14px;
    position: absolute;
    top: 15px;
    left: 56.75px;
    background: #f5c04f; 
    z-index: 5;
    border-radius: 20px;
}
#browserdot3{
    height: 14px;
    width: 14px;
    position: absolute;
    top: 15px;
    left: 79.5px;
    background: #61c654; 
    z-index: 5;
    border-radius: 20px;
}

#browserdot1-playlist{
    height: 14px;
    width: 14px;
    position: absolute;
    top: 25px;
    left: 35px;
    background: #ed6b5e; 
    z-index: 5;
    border-radius: 20px;
}
#browserdot2-playlist{
    height: 14px;
    width: 14px;
    position: absolute;
    top: 25px;
    left: 56.75px;
    background: #f5c04f; 
    z-index: 5;
    border-radius: 20px;
}
#browserdot3-playlist{
    height: 14px;
    width: 14px;
    position: absolute;
    top: 25px;
    left: 79.5px;
    background: #61c654; 
    z-index: 5;
    border-radius: 20px;
}



#topbrowserbar-right{
    background:#f2f2f2; /* e9e9e9 */
    position: absolute;
    z-index: 2;
    height: 65px;
    width: 571px;
    top: -415px; /* You can adjust this for overlap */
    right: -600px; /* You can adjust this for overlap */
    border-top: 0.2px solid #aaaaaa;
    border-left: 0.2px solid #aaaaaa;
    border-bottom: 0.1px solid #aaaaaa;

    border-right: 0.2px solid #aaaaaa;
    border-top-right-radius: 15px;
    transition: background-color 1s, color 1s;
    

}

.song-item {
    width: 30%; /* 4 items per row (100% / 4 = 25%, but we use 23% for spacing) */
    display: flex;
    flex-direction: column;
    align-items: right;
    border-radius: 15px;
    z-index: 20;
    overflow: hidden;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
}

.song-description{
    font-family: "Roboto", sans-serif;
    text-align: left;
}

.song-image {
    width: 100%;
    height: auto;
    max-height: 200px; /* Maximum height for images to avoid overflow */
    object-fit: contain; /* Ensures the image fits within the container without distortion */
    border-radius: 15px;
   
}

.song-item .song-image:hover{
    cursor: pointer;
}

.song-title{
    color: black;
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    margin-left: 0px;
}
.artist-name{
    color: black;
    margin-top: 5px;
    font-size: 12px;
}

.container .image{
    position: absolute;
    top: 77.5px;
    width: 237.5px;
    height: 237.5px;
    border-radius: 20px;
    z-index: 3;
}


.selected-song {
    color: black;
    z-index: 10;
    position: absolute;
    left: 92.5px;
    text-align: left;
    top: 315px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 16px;
} 

.selected-song-artist{
    color: black;
    z-index: 10;
    left: 92.5px;
    text-align: left;
    position: absolute;
    top: 335px;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    font-size: 12px;
    padding-top: 20px;
}

.audio-duration{
    text-align: right; 
    color: #808080; 
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    position: absolute;
    z-index: 9999;
    top: 355px;
    right: 92.5px;
} 

.container .song-text{
    position: absolute;
    font-family: sans-serif;
    top: 320px;
    color: black;
    
}

.button-container .container-button{
    z-index: 100;
    outline: none;
    transition: background-color 0.1s, color 0.1s;
    
}

.button-container .container-button:hover{
    cursor: pointer;
    color: rgb(200, 200, 200);
    transition: 0.1s;

} 

.container .button-container {
    display: flex;
    flex-direction: row; /* Align buttons horizontally */
    gap: 24px; /* Space between buttons */
    position: absolute;
    top: 410px;
    align-items: center;
}

.button-container .container-button{
    border: none;
    color: #808080;
    background: transparent;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
    z-index: 10;
}

#playPauseButton{
    font-size: 28px;
}
#playPauseButton:hover{
    color: rgb(196, 196, 196);
}

#nextSongButton{
    font-size: 20px;
    box-sizing: border-box;
    flex-grow: 0; 
}
#prevSongButton{
    font-size: 20px;
    box-sizing: border-box;
    flex-grow: 0; 
}

#randomSongButton{
    font-size: 20px;
    box-sizing: border-box;
    flex-grow: 0; 
}
#repeatButtonIcon{
    font-size: 20px;
    box-sizing: border-box;
    flex-grow: 0; 
}

.filter-container{
    background-color: none;
    z-index: 0; /* e9e9e9 */
    position: absolute;
    height: 605.75px;
    width: 152px;
    top: -370px;
    left: -135px;
    font-family: "Roboto", sans-serif;

    border-bottom-left-radius: 15px;
  
    border-bottom: 0.2px solid #aaaaaa;

    padding-left: 10px;
    
    margin-bottom: 0;
    padding-bottom: 0;
    font-weight: normal;
    transition: background-color 1s, color 1s;

   
    border-right: 0.2px solid #aaaaaa;

}


.filterButtonHolder {
    width: 161.5px;
    height: 605px; /* Added height to ensure scrolling space */
    background: #e9e9e9; /*e9e9e9 */
border-bottom-left-radius: 15px;
border-right: 0.2px solid #aaaaaa;
border-bottom: 0.2px solid #aaaaaa;
border-left: 0.2px solid #aaaaaa;
    overflow-y: auto; /* Keeps vertical scrolling enabled */
    flex-direction: column;
    margin-left: -10px;
    gap: 0px;
    background-clip: border-box;

    display: flex;
    align-items: center;
    -ms-flex-item-align: center;

    padding-top: 20px;
    top: 8px;
    position: absolute;
    transition: background-color 1s, color 1s;
    row-gap: 0px;

    box-shadow:
    -15px 0 20px -10px rgb(169,169,169),  /* Left */
     0 -15px 20px -10px rgb(169,169,169), /* Top */
     0 15px 20px -10px rgb(169,169,169);  /* Bottom */

}


.filter-button{
    display: inline;
    transition: background-color 0.3s, color 1s;
    letter-spacing: 0.5px;
    font-weight: normal;
  
    cursor: pointer;
    text-align: left;
    width: 80%;
    border-radius: 8px;
    background-color: transparent;
    line-height: 1px;
    font-size: 14.7px;
    user-select: none;
    border: none;
    font-family: "Roboto", sans-serif;
    margin: 0;
}

.filter-button input {
    display: none; /* Hide the actual checkbox */
    margin: 0;
}

.filter-button span {
    display: flex;
    gap: 0px;
    align-items: center;
    padding: 8px 25px 8px 20px;
    margin: 0;
}
.filter-button input:checked +span {
    background-color: #ced2d1;
    border-radius: 8px;
}

.filter-button:hover {
   
    cursor: pointer;
}


.dropdown{
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center; /* Centers the dropdown within the parent */
    top: 360px;
}

#songSelect {
    padding: 15px;
    font-size: 16px;
    width: 50%; /* Full width of dropdown */
    text-align: center;
    border: none;
    border-radius: 20px;
    font-family: "Roboto", sans-serif;
    outline: none;
    transition: 1s;
}
#songSelect:hover{
    cursor: pointer; 
    background-color: rgb(224, 224, 224);
    color: black;
}




@media only screen and (max-width: 1280px) {
    body{

        overscroll-behavior-y: auto;
        overflow: auto;
        height: auto;
        max-height: 100vh;
    }
    html{
        height: auto;
        overflow: auto;
        max-height: 100vh;
    }

    .container-playlist{
        overflow-y: auto;
    margin-bottom: 20px;
    top: 720px;
    }

    #topbrowserbar-right{
        top: 245px;
        width: 437px;
        left: -150px;
    }

    #topbrowserbar-playlist{
        top: 245px;
        left: -313px;
        
    }

    .sitebody{
        overflow: auto;
    }

    .container{
        left: 20%;
    }

    .container-playlist{
        width: 405px;
        height: 545px;
        top: 310px;
        left: -150px;
    }

    .filter-container{
        top: 300px;
        left: -313px;
        height: 560px;
        border-radius: 15px;
    }
    .filterButtonHolder{
        height: 560px;
    }

}


@media only screen and (max-width: 600px){
    body{

    }
    .container{
        left: 8%;
    }

    .container-playlist{
        width: 299px;
        left: -100px;
        height: 500px;
    }
    #topbrowserbar-right{
        width: 330px;
        left: -100px;
    }
    .filter-container{
        left: -262px;
        height: 513px;
    }
    .filterButtonHolder{
        height: 513px;
  
    }
    #topbrowserbar-playlist{
        left: -262px;

    }
}



.rightside{

position: relative;
    height: auto;
    width: auto;

}


.radio-item{
    padding: 10px;
    right: 0;
    font-family:"Roboto", sans-serif;
    cursor: pointer;
    border-radius: 20px;
}

input[type="radio"] {
    display: none;
    color: white;
}



label {
    cursor: pointer;  /* Change the cursor when hovering over the label */
}


.playing {
    font-weight: bold;
    font-size: 16px;
    color: rgb(255, 255, 255);
}

.song-item.playing {
    font-weight: bold;
    background-color: #e0e0e0; /* Light gray */
    transition: 0.3s; 
}


.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    top: 250px;
}

/* Hidden checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
/* Slider */
.slider {
    position: absolute;
    cursor: pointer; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 30px;
}
.slider:hover{
    cursor: grab;
}
/* Circle inside the slider */
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
.slider:hover{
    background-color: rgb(178, 178, 178);
}
.slider:before:hover{
    background-color: rgb(227, 227, 227);
}


/* Dark mode - move the circle to the right */
input:checked + .slider {
    background-color: #767676;
}
input:checked + .slider:before {
    transform: translateX(30px);
}
input:checked + .slider:hover {
    background-color: rgb(74, 74, 74);
}


#seekbar{
    -webkit-appearance: none; 
    -moz-appearance: none;   
    appearance: none;
    position: absolute;
    top: 392.5px;
    max-width: 237.5px;
    height: 2px;
    background: #808080;
    transition: background-color 1s, color 1s;
    cursor: pointer;
}

#seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    cursor: grab;
    background: #808080;
    box-shadow: black;
    cursor: grab;
    transition: 0.3s ease;
}

#seekbar::-webkit-slider-thumb:hover{
    box-shadow: 0 0 0px 2px #808080;
   
}

#seekbar::-webkit-slider-thumb:active{
    cursor: grabbing;
}









.light-mode {
    background-color: #fff;
    color: #000;
    transition: 1s;
}




.dark-mode{
    transition: 1s;
    background-color: #121212;
    color: #fff;
}
.dark-mode html, .dark-mode body {
    background-color: #121212;
    color: #fff;
}
.dark-mode .container{
    transition: 1s;
    background: #2b2b2b;
    color: #fff;
    
    box-shadow: 0px 0px 5px rgb(37, 37, 37);
}
.dark-mode #topbrowserbar{
    transition: 1s;
    background: #383838;
}

.dark-mode .container-playlist{
    transition: 1s;
    background: #2b2b2b;
    color: #fff;
    box-shadow: 0px 0px 15px rgb(37, 37, 37);
}

.dark-mode #topbrowserbar-right{
    background-color: #383838;
}

.dark-mode .filterButtonHolder{
    box-shadow: 0px 0px 30px black;
}

.dark-mode #topbrowserbar-playlist{
    transition: 1s;
    background: #383838;
}
.dark-mode .filter-container{
    transition: 1s;
    background-color: #2b2b2b;

}
.dark-mode .filterButtonHolder{
    transition: 1s;
    background: #2b2b2b;
}

.dark-mode .filter-button{
    transition: 1s;
    border-color: #7c7b7d;
    color: #a6a5a7;
}
.dark-mode .button-container .container-button{
    transition: 1s;
    color: #7c7b7d;
}

.dark-mode #seekbar{
    background-color: #7c7b7d;
}
.dark-mode #seekbar::-webkit-slider-thumb{
    background-color: #7c7b7d;
}

.dark-mode #selected-song{
    color: #7c7b7d;
}

.dark-mode #selected-song-artist{
    color: #7c7b7d;
}
.dark-mode #song-item{
    color: #7c7b7d;
}

.dark-mode .song-description{
    color: #7c7b7d;
}
.dark-mode .audio-duration{
    color: #7c7b7d;
    transition: 1s;
}

.dark-mode .light-dark-toggle{
    color: #7c7b7d;
}
.dark-mode .song-title{
    color: #7c7b7d;
}
.dark-mode .artist-name{
    color: #7c7b7d;
}

.light-dark-toggle{
    color: #808080;
    font-size: 16px;
    z-index: 15;
    top:318px;
    right:90px;
    position: absolute;
}
.light-dark-toggle :hover{
    cursor: pointer;
}




/*
#time {
    position: fixed;          
    top: 372px;               
    right:569px;            
    z-index: 1;            
    background: transparent;  
    font-size: 108px;        
    font-family: "Questrial", sans-serif;
    font-weight: bolder;
    letter-spacing: -5px;
}
*/