body{

background:#f7f7f7;

color:#333;

font-family:'Inter', Arial, sans-serif;

}

/* CONTAINER */

.lyrics-container{

width:90%;

max-width:900px;

margin:60px auto;

display:flex;

flex-direction:column;

gap:40px;

}

/* SONG CARD */

.song-card{

background:white;

padding:40px;

border-radius:20px;

border:1px solid #eee;

box-shadow:0 4px 15px rgba(0,0,0,0.05);

transition:0.25s ease;

}

.song-card:hover{

transform:translateY(-4px);

}

/* SONG TITLE */

.song-card h2{

font-size:30px;

margin-bottom:20px;

}

/* PREVIEW */

.lyrics-preview{

max-height:140px;

overflow:hidden;

position:relative;

font-size:16px;

line-height:1.9;

color:#444;

}

/* FADE EFFECT */

.lyrics-preview::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:70px;

background:linear-gradient(
transparent,
white
);

}

.locked{

filter:blur(4px);

user-select:none;

pointer-events:none;

}

/* FULL LYRICS */

.lyrics-full{

max-height:0;

overflow:hidden;

transition:max-height 0.5s ease;

}

.lyrics-full.active{

max-height:2000px;

margin-top:25px;

}

/* BUTTON */

.show-btn{

padding:12px 22px;

background:#111;

color:white;

border:none;

border-radius:12px;

font-weight:bold;

cursor:pointer;

margin-bottom:20px;

}

/* FORM */

form{

margin-top:25px;

display:flex;

gap:10px;

flex-wrap:wrap;

}

input{

padding:12px;

border:1px solid #ddd;

border-radius:10px;

flex:1;

min-width:220px;

}

form button{

padding:12px 20px;

background:#111;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

}

/* EXTRA TEXT */

.silver-text{

color:#9F9F9F;

font-weight:bold;

font-size:18px;

text-align:center;

}

/* MOBILE */

@media(max-width:768px){

.song-card{

padding:30px 20px;

}

.song-card h2{

font-size:24px;

}

.lyrics-preview{

font-size:15px;

}

}