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

body{

background:#000;
color:white;
padding:20px;

}

.container{

max-width:1400px;
width:100%;
margin:auto;

}

.title{

font-size:35px;
margin-bottom:20px;

}

.search{

width:100%;
padding:15px;

background:#111;
border:none;

border-radius:40px;

color:white;

outline:none;

margin-bottom:20px;

font-size:15px;

}

.search:focus{

box-shadow:
0 0 20px
rgba(255,255,255,.2);

}

.categories{

display:flex;
gap:10px;

overflow-x:auto;

margin-bottom:25px;

}

.categories::-webkit-scrollbar{

display:none;

}

.categories button{

padding:10px 18px;

background:#111;

border:none;

border-radius:30px;

color:white;

cursor:pointer;

transition:.5s;

white-space:nowrap;

}

.categories button:hover,
.active{

background:white;
color:black;

}


.cards{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:20px;

}


.card{

background:
rgba(255,255,255,.05);

border-radius:20px;

overflow:hidden;

transition:.5s;

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

backdrop-filter:
blur(10px);

}


.card:hover{

transform:
translateY(-10px);

box-shadow:
0 0 25px
rgba(255,255,255,.2);

}


.card img{

width:100%;

height:180px;

object-fit:cover;

}


.content{

padding:15px;

}


.content h2{

font-size:18px;

}


.author{

opacity:.7;

margin:10px 0;

font-size:13px;

}


.info{

display:flex;

justify-content:space-between;

font-size:13px;

margin-bottom:10px;

}


.desc{

font-size:13px;

opacity:.8;

margin-bottom:15px;

line-height:20px;

}


.buttons{

display:flex;
gap:10px;

}


.listen{

flex:1;

padding:10px;

border:none;

border-radius:20px;

cursor:pointer;

font-weight:bold;

}


.love{

padding:10px;

border:none;

border-radius:20px;

background:#222;

color:white;

cursor:pointer;

transition:.4s;

}


.love:hover{

transform:scale(1.1);

}


.homeBtn{

position:fixed;

left:20px;
top:20px;

width:50px;
height:50px;

display:flex;

justify-content:center;
align-items:center;

border-radius:50%;

background:
rgba(255,255,255,.1);

backdrop-filter:
blur(10px);

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

color:white;

text-decoration:none;

font-size:24px;

z-index:999;

transition:.5s;

}


.homeBtn:hover{

transform:scale(1.1);

box-shadow:
0 0 20px
rgba(255,255,255,.3);

}



/* MOBILE */
/* MOBILE FIX */

@media(max-width:768px){

html,body{

width:100%;
overflow-x:hidden;
margin:0;
padding:0;

}

.container{

width:100vw;
max-width:100vw;

padding:8px;
margin:0;

}

.cards{

display:grid;

grid-template-columns:
repeat(4,calc((100vw - 26px)/4));

gap:6px;

justify-content:center;

}

.card{

width:100%;

}

.card img{

height:70px;

}

.content{

padding:5px;

}

.content h2{

font-size:9px;

}

.author,
.info{

font-size:7px;

}

.desc{

display:none;

}

.buttons{

gap:3px;

}

.listen,
.love{

padding:4px;
font-size:7px;

}

}

.title{

font-size:24px;

}

.search{

padding:12px;
font-size:13px;

}