*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins;

}

body{

background:#06070f;

color:white;

}

nav{

padding:25px 8%;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:50px;

}

.menu{

display:flex;

gap:50px;

}

.menu a{

color:white;

cursor:pointer;

}

button{

border:none;

padding:14px 34px;

border-radius:40px;

color:white;

background:

linear-gradient(
90deg,
#FF2E88,
#7B2FF7
);

}

.hero{

height:100vh;

background:

url(
../assets/hero-bg.jpg
);

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

padding:0 8%;

}

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(
0,
0,
0,
.9
),

transparent

);

}

.content{

position:relative;

z-index:2;

}

.content h1{

font-size:90px;

max-width:700px;

}

.content p{

margin:20px 0;

font-size:24px;

}

.primary{

margin-right:20px;

}

.secondary{

background:#151524;

}

.cards{

display:grid;

grid-template-columns:

repeat(
4,
1fr
);

gap:25px;

padding:60px;

}

.card{

overflow:hidden;

border-radius:30px;

transition:.3s;

}

.card img{

width:100%;

height:350px;

object-fit:cover;

}

.card:hover{

transform:

translateY(-10px);

}

.artists{

display:flex;

gap:40px;

padding:50px;

}

.artists img{

width:160px;

height:160px;

border-radius:50%;

border:3px solid #FF2E88;

}

.player{

position:fixed;

bottom:20px;

left:50%;

transform:

translateX(-50%);

padding:25px;

background:#141424;

border-radius:30px;

}

.player button{

width:80px;

height:80px;

border-radius:50%;

}