/* ==================================================
   FKN RADIO DOWNLOAD v2.0
================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:#000;
color:#fff;
font-family:monospace;
}

/* HEADER */

.header{
padding:40px 0;
text-align:center;
}

.logo{
color:white;
text-decoration:none;
font-size:42px;
letter-spacing:8px;
font-weight:bold;
}

/* PRICE BAR */

.priceBar{
position:sticky;
top:0;
display:flex;
justify-content:center;
gap:50px;
padding:18px;
background:black;
border-bottom:1px solid rgba(255,255,255,.08);
transition:.35s;
z-index:999;
}

.priceBar.hide{
transform:translateY(-100%);
opacity:0;
}

/* LIBRARY */

.library{
width:min(1500px,92vw);
margin:auto;
padding:60px 0;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:55px;
}

/* CARD */

.card{
display:flex;
flex-direction:column;
}

/* COVER */

.cover{
aspect-ratio:1;
border:1px solid rgba(255,255,255,.18);
cursor:pointer;
overflow:hidden;
transition:.25s;
}

.cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.cover:hover{
border-color:white;
box-shadow:
0 0 12px white,
0 0 24px rgba(0,255,255,.25),
0 0 35px rgba(255,0,255,.18);
}

.cover.selected{
border-color:white;
box-shadow:
0 0 15px white,
0 0 25px cyan,
0 0 45px magenta;
}

/* TRACK */

.track{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
margin-top:15px;
}

.number{
opacity:.45;
font-size:13px;
}

.title{
flex:1;
font-size:15px;
letter-spacing:1px;
}

.preview{
background:none;
border:none;
color:white;
font-size:18px;
cursor:pointer;
transition:.2s;
}

.preview:hover{
transform:scale(1.2);
}

/* DOWNLOAD */

.download{

width:100%;

margin-top:12px;

padding:12px;

background:white;

color:black;

border:none;

cursor:pointer;

font-weight:bold;

letter-spacing:2px;

transition:.25s;

}

.download:hover{

background:#00ff99;

transform:translateY(-2px);

}

/* FOOTER */

footer{

display:flex;

justify-content:space-between;

align-items:center;

padding:35px;

border-top:1px solid rgba(255,255,255,.08);

margin-top:80px;

}

footer a{

color:white;

text-decoration:none;

opacity:.7;

margin-left:30px;

}

footer a:hover{

opacity:1;

}

#selected{

letter-spacing:3px;

font-size:13px;

opacity:.8;

}