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


:root{

--bg:#050505;
--glass:rgba(255,255,255,.08);
--border:rgba(255,255,255,.15);
--text:#ffffff;
--muted:#a8a8a8;
--accent:#ffffff;

}


*{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

margin:0;

min-height:100vh;

background:#000;

font-family:Inter,sans-serif;

color:var(--text);

overflow-x:hidden;

}


/* HEADER */


.site-header{


width:min(1400px,92%);

margin:30px auto 0;


display:flex;

justify-content:space-between;

align-items:center;


padding:25px 35px;


border-bottom:

1px solid rgba(255,255,255,.15);


}



.brand a{


font-family:
"Alata",
serif;


font-size:42px;


color:white;


text-decoration:none;


letter-spacing:2px;


}




.site-header nav{


display:flex;

gap:35px;


}



.site-header nav a{


color:#aaa;

text-decoration:none;


font-size:15px;


transition:.3s;


}



.site-header nav a:hover,
.site-header nav .active{


color:white;


}





/* SECONDARY MUSIC NAV */


.music-nav{


width:min(1400px,92%);


margin:25px auto;


display:flex;


justify-content:center;


gap:30px;


flex-wrap:wrap;


font-size:16px;


letter-spacing:2px;


}



.music-nav a{


color:#888;


text-decoration:none;


padding-bottom:8px;


transition:.3s;


}



.music-nav a:hover{


color:white;


}




.music-nav .selected{


color:white;


border-bottom:

1px solid white;


}




/* MOBILE */


@media(max-width:700px){



.site-header{


flex-direction:column;

gap:20px;


}



.site-header nav{


gap:20px;


}



.brand a{


font-size:36px;


}



.music-nav{


justify-content:flex-start;


overflow-x:auto;


flex-wrap:nowrap;


padding-bottom:10px;

}



}



/* Ambient background */


.ambient{

position:fixed;

inset:-20%;

z-index:-1;


background:

radial-gradient(
circle at 20% 20%,
#643b7a,
transparent 35%
),

radial-gradient(
circle at 80% 70%,
#1c526b,
transparent 35%
),

linear-gradient(
135deg,
#050505,
#111
);


filter:blur(70px);

animation:

ambientMove 18s infinite alternate ease-in-out;

}



@keyframes ambientMove{


from{

transform:scale(1);

}


to{

transform:scale(1.3);

}


}





/* Main container */


.album{


width:min(1400px,92%);

min-height:90vh;

margin:5vh auto;


display:grid;

grid-template-columns:

1fr 1fr;


gap:80px;


padding:60px;



background:

var(--glass);


border:

1px solid var(--border);


backdrop-filter:

blur(35px);


-webkit-backdrop-filter:

blur(35px);



border-radius:40px;



box-shadow:

0 40px 100px rgba(0,0,0,.65);


}





/* COVER SIDE */


.album-cover{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}




.cover-frame{


width:min(100%,480px);


border-radius:30px;


overflow:hidden;


box-shadow:

0 30px 80px rgba(0,0,0,.8);


}



.cover-frame img{


display:block;


width:100%;


transition:

transform .8s ease;


}



.cover-frame:hover img{


transform:scale(1.05);


}






.album-info{


max-width:480px;

margin-top:35px;

text-align:justify;

}



.label{


font-size:11px;

letter-spacing:4px;

color:var(--muted);

}





.album-info h1{

font-family:"Alata",serif;

font-size:clamp(48px,5vw,72px);

font-weight:600;

line-height:.95;

letter-spacing:6px;

margin:15px 0;

}




.album-info h2{


font-size:20px;

font-weight:300;

color:#bbb;


}



.album-info p{


color:#ddd;

line-height:1.8;


font-size:15px;


}



.album-info a{


display:inline-block;


margin-top:15px;


color:white;

text-decoration:none;


border-bottom:

1px solid white;


padding-bottom:5px;


}





/* PLAYER */


.player{


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


}




.now-playing{


text-align:center;


}



.now-playing span{


font-size:11px;

letter-spacing:3px;

color:#999;


}



.now-playing h3{


font-size:32px;


margin:15px 0 5px;


}




.now-playing p{


margin:0;

color:#aaa;


}






/* VINYL */


.vinyl{


margin:40px 0;


width:230px;

height:230px;


border-radius:50%;


padding:8px;


background:

linear-gradient(
135deg,
#222,
#000
);


box-shadow:

0 30px 60px black;


animation:

spin 15s linear infinite;


}




.vinyl img{


width:100%;

height:100%;

border-radius:50%;


}





@keyframes spin{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}






.controls{


display:flex;

gap:20px;


}



.controls button{


width:60px;

height:60px;


border-radius:50%;


border:none;


cursor:pointer;


font-size:22px;


background:white;


color:black;


transition:.3s;


}



.controls button:hover{


transform:scale(1.1);


}






.timeline{


width:100%;

max-width:450px;


margin-top:35px;


}



.time{


display:flex;

justify-content:space-between;


font-size:12px;


color:#aaa;


margin-bottom:10px;


}




.progress-container{


height:8px;


background:

rgba(255,255,255,.2);


border-radius:20px;


overflow:hidden;


cursor:pointer;


}




#progress{


height:100%;


width:0;


background:white;


box-shadow:

0 0 20px white;


}







.playlist-title{


width:100%;


max-width:450px;


margin-top:40px;


font-size:11px;


letter-spacing:3px;


color:#999;


}




#playlist{


list-style:none;


padding:0;


margin:

15px 0 0;


width:100%;


max-width:450px;


}



#playlist li{


padding:14px 18px;


margin-bottom:8px;


border-radius:14px;


cursor:pointer;


color:#aaa;


background:

rgba(255,255,255,.04);


transition:.3s;


font-size:14px;


}



#playlist li:hover{


background:

rgba(255,255,255,.12);


color:white;


}




#playlist li.active{

background:white;

color:black;

}


#playlist li.active .track-sub{

opacity:.55;

}


.track-main{

font-size:15px;

line-height:1.4;

}



.track-sub{

font-size:11px;

letter-spacing:2px;

margin-top:6px;

opacity:.6;

text-transform:uppercase;

}




/* LYRICS MODAL */


.lyrics-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.75);

backdrop-filter:blur(20px);

display:none;

align-items:center;

justify-content:center;

z-index:500;


}



.lyrics-modal.open{

display:flex;

}



.lyrics-box{

width:min(700px,90%);

max-height:80vh;

overflow-y:auto;


background:

rgba(20,20,20,.95);


border:

1px solid rgba(255,255,255,.15);


border-radius:30px;


padding:50px;


position:relative;


box-shadow:

0 40px 100px black;


}



.lyrics-close{

position:absolute;

right:25px;

top:20px;


background:none;

border:0;


color:white;

font-size:35px;

cursor:pointer;


}



.lyrics-language{

font-size:11px;

letter-spacing:4px;

color:#999;

margin-bottom:20px;

}



.lyrics-box h2{

font-family:"Alata",serif;

font-size:35px;

margin-bottom:30px;

}



.lyrics-text{

white-space:pre-line;

line-height:1.9;

font-size:16px;

color:#ddd;


}



/* buttons in playlist */


.track-sub button{

background:none;

border:0;

padding:0;

color:inherit;

font-size:11px;

letter-spacing:2px;

cursor:pointer;

text-transform:uppercase;

opacity:.8;

}



.track-sub button:hover{

opacity:1;

text-decoration:underline;

}


.track-sub button::after{

content:"";

}


.track-sub button{

transition:.3s;

}



/* MOBILE */


@media(max-width:950px){


.album{


grid-template-columns:1fr;


padding:30px 20px;


gap:40px;


width:95%;


}



.vinyl{


width:190px;

height:190px;


}



.album-info h1{


font-size:52px;


}



.player{


padding-bottom:30px;


}



}





@media(max-width:500px){



.album{


border-radius:25px;


}



.cover-frame{


border-radius:20px;


}



.album-info h1{


font-size:44px;


}



.controls button{


width:55px;

height:55px;


}


}


/* FOOTER */


.site-footer{

width:min(1400px,92%);

margin:60px auto 30px;

padding-top:25px;

border-top:

1px solid rgba(255,255,255,.15);


text-align:center;


color:#888;


font-size:12px;


letter-spacing:2px;


}



.site-footer p{

margin:8px 0;


}



.site-footer p:first-child{


color:white;


font-size:13px;


}



/* MUSIC MOBILE MENU */


.music-wrapper{

width:min(1400px,92%);

margin:25px auto;

}




.music-toggle{

display:none;

background:none;

border:0;

color:white;

font-size:34px;

cursor:pointer;

line-height:1;


}





.music-nav{


display:flex;


justify-content:center;


gap:30px;


flex-wrap:wrap;


font-size:18px;


letter-spacing:2px;


}





.music-nav a{


color:#888;

text-decoration:none;

padding-bottom:8px;

transition:.3s;


}




.music-nav a:hover{


color:white;


}




.music-nav .selected{


color:white;


border-bottom:

1px solid white;


}






@media(max-width:700px){


.music-wrapper{


position:relative;


}


.music-toggle{


display:block;

margin:auto;


}



.music-nav{


display:none;


position:absolute;


top:55px;

left:0;

right:0;


background:

rgba(10,10,10,.95);


backdrop-filter:

blur(20px);


border:

1px solid rgba(255,255,255,.15);


border-radius:20px;


padding:25px;


flex-direction:column;


align-items:center;


gap:22px;


z-index:100;


}




.music-nav.open{


display:flex;


}



}