body{
margin:0;
font-family: 'Georgia', serif;
background-color: #c7d0c6 !important;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background-size: 200px;
}

.altar{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

.altar-container{
text-align:center;
max-width:420px;
width:100%;
}

.altar-header h1{
letter-spacing:4px;
font-weight:300;
margin-bottom:20px;
opacity:.8;
}

.altar-card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.15);
border-radius:18px;
padding:25px;
box-shadow:
0 0 30px rgba(255,255,255,0.05),
0 0 80px rgba(0,0,0,0.9) inset;
backdrop-filter: blur(6px);
}

.song-title{
font-size:28px;
margin:0;
letter-spacing:2px;
}

.album{
opacity:.6;
margin-bottom:20px;
}

.cover img{
width:100%;
border-radius:10px;
box-shadow:0 0 25px rgba(0,0,0,.8);
margin-bottom:20px;
}

.controls{
display:flex;
justify-content:center;
gap:15px;
margin-bottom:15px;
}

.controls button{
background:#ffffff;
border:1px solid #000;
color:#000;
padding:12px 16px;
border-radius:50%;
cursor:pointer;
transition:.3s;
}
.controls button:hover{
background:#000;
color:#fff;
transform:scale(1.1);
}

.play{
background:#000;
color:#fff;
}

.progress{
height:3px;
background:rgba(255,255,255,0.2);
margin-bottom:15px;
border-radius:5px;
overflow:hidden;
}

.bar{
width:35%;
height:100%;
background:linear-gradient(90deg,#fff,#888);
}

audio{
width:100%;
filter: invert(1) contrast(.8);
}
.lyrics{
margin-top:30px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.12);
border-radius:16px;
padding:25px;
box-shadow:0 0 5px rgba(0,0,0,.6) inset;
}

.lyrics h3{
letter-spacing:3px;
font-weight:300;
margin-top:0;
opacity:.8;
}

.lyrics-content{
line-height:1.8;
font-size:14px;
opacity:.9;
white-space:pre-line;
}

.social{
display:flex;
justify-content:center;
gap:15px;
margin-top:25px;
flex-wrap:wrap;
}

.social a{
text-decoration:none;
color:#111;
background:#ffffff;
padding:8px 14px;
border-radius:20px;
font-size:12px;
letter-spacing:1px;
transition:.3s;
}

.social a:hover{
background:#ddd;
transform:translateY(-2px);
}
.lyrics-content{
display:none;
white-space:pre-line;
}

.lyrics-content.show{
display:block;
}

.ipod{
width:260px;
margin:auto;
background:#f8f8f8;
border-radius:25px;
padding:20px;
box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.screen{
position:relative;
overflow:hidden;
background:#ffffff;
}

.screen::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
opacity:0.08;
background-image:
radial-gradient(#000 0.5px, transparent 0.5px);
background-size:3px 3px;
}

.screen img{
width:100%;
border-radius:8px;
}

.wheel{
width:200px;
height:200px;
margin:auto;
background:#fff;
border-radius:50%;
position:relative;
box-shadow: inset 0 0 10px rgba(0,0,0,.1);
}

.wheel button{
position:absolute;
background:none;
border:none;
font-size:14px;
cursor:pointer;
color:#000;
}

.top{
top:15px;
left:50%;
transform:translateX(-50%);
}

.left{
left:20px;
top:50%;
transform:translateY(-50%);
}

.right{
right:20px;
top:50%;
transform:translateY(-50%);
}

.bottom{
bottom:15px;
left:50%;
transform:translateX(-50%);
}

.center{
width:70px;
height:70px;
background:#eee;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

.ipod-text{
width:100%;
overflow:hidden;
white-space:nowrap;
position:relative;
height:18px;
}

.scroll-text{
display:inline-block;
padding-left:100%;
animation: ipodScroll 8s linear infinite;
font-size:13px;
}

@keyframes ipodScroll{
0%{
transform: translateX(0%);
}
100%{
transform: translateX(-100%);
}
}