@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
background:#121212;
color:white;
height:100vh;
overflow:hidden;
}

/* APP */

.app{
display:grid;
grid-template-columns:240px 1fr;
height:100vh;
padding-bottom:70px; /* space for player */
}

/* SIDEBAR */

.sidebar{
background:#090909;
padding:26px;
border-right:1px solid #1c1c1c;
}

.logo{
font-size:22px;
font-weight:700;
margin-bottom:30px;
}

.queue-title{
font-size:12px;
letter-spacing:1px;
color:#b3b3b3;
margin-bottom:12px;
}

/* QUEUE */

#queue-list{
list-style:none;
height:calc(100vh - 140px);
overflow-y:auto;
padding-right:4px;
}

#queue-list li{
padding:10px;
border-radius:6px;
cursor:pointer;
color:#b3b3b3;
font-size:14px;
transition:.2s;
}

#queue-list li:hover{
background:#1a1a1a;
color:white;
}

#queue-list li.active{
color:white;
font-weight:600;
background:#222;
}
/* Smooth scrolling */
#queue-list{
scroll-behavior:smooth;
}

/* Entire scrollbar */
#queue-list::-webkit-scrollbar{
width:8px;
}

/* Track (invisible) */
#queue-list::-webkit-scrollbar-track{
background:transparent;
}

/* Thumb */
#queue-list::-webkit-scrollbar-thumb{
background:transparent;
border-radius:20px;
transition:.25s;
}

/* Show only on hover */
#queue-list:hover::-webkit-scrollbar-thumb{
background:#2f2f2f;
}

/* Hover on thumb */
#queue-list::-webkit-scrollbar-thumb:hover{
background:#3a3a3a;
}

/* MAIN */

.main{
padding:40px;
overflow-y:auto;
}

.section-title{
font-size:28px;
margin-bottom:25px;
}

/* GRID */

.album-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:26px;
}

.album{
background:#181818;
padding:16px;
border-radius:10px;
cursor:pointer;
transition:.25s;
position:relative;
}

.album:hover{
background:#242424;
transform:translateY(-6px);
}

.album img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.play-btn{
position:absolute;
right:18px;
bottom:75px;
width:46px;
height:46px;
border-radius:50%;
background:#1db954;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transform:translateY(10px);
transition:.25s;
}

.album:hover .play-btn{
opacity:1;
transform:translateY(0);
}

/* PLAYER */

.player{
position:fixed;
bottom:0;
left:0;
right:0;
height:70px;
background:#181818;
border-top:1px solid #282828;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 30px;
}

/* Smooth scrolling */
.main{
scroll-behavior:smooth;
}

/* width */
.main::-webkit-scrollbar{
width:10px;
}

/* invisible track */
.main::-webkit-scrollbar-track{
background:transparent;
}

/* thumb */
.main::-webkit-scrollbar-thumb{
background:transparent;
border-radius:20px;
transition:.25s;
}

/* show only on hover */
.main:hover::-webkit-scrollbar-thumb{
background:#2a2a2a;
}

/* thumb hover */
.main::-webkit-scrollbar-thumb:hover{
background:#3a3a3a;
}


.track-info{
display:flex;
align-items:center;
gap:12px;
width:260px;
}

.track-info img{
width:48px;
height:48px;
border-radius:6px;
}

#player-artist{
color:#b3b3b3;
font-size:13px;
}

/* CONTROLS */

.controls{
display:flex;
align-items:center;
gap:18px;
}

.controls button{
background:none;
border:none;
color:white;
font-size:18px;
cursor:pointer;
}

#play{
background:white;
color:black;
width:40px;
height:40px;
border-radius:50%;
}

/* PROGRESS */

#progress{
width:32%;
appearance:none;
height:4px;
background:#535353;
border-radius:10px;
}

#progress::-webkit-slider-thumb{
appearance:none;
width:12px;
height:12px;
border-radius:50%;
background:white;
}
/* VOLUME */

.volume-container{
display:flex;
align-items:center;
gap:10px;
width:180px;
}

/* icon */

#volume-icon{
font-size:16px;
color:#b3b3b3;
}

/* slider */

#volume-slider{
appearance:none;
width:120px;
height:4px;
background:#535353;
border-radius:10px;
cursor:pointer;
}

/* thumb */

#volume-slider::-webkit-slider-thumb{
appearance:none;
width:12px;
height:12px;
border-radius:50%;
background:white;
}

#volume-slider:hover{
background:#777;
}