body{
margin:0;
background: #000000;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;
color:white;
}

/* intro */

#intro{
position:fixed;
inset:0;
background:black;
display:flex;
align-items:center;
justify-content:center;
z-index:999;
}

.startBox{
text-align:center;
}

.startBox p{
font-size:20px;
margin-bottom:20px;
color:#ccc;
}

button{
padding:10px 20px;
border:1px solid #555;
background:black;
color:white;
cursor:pointer;
}

/* scene */

.scene{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

.content{
display:flex;
gap:80px;
transform:scale(1.25);
}

/* discord */

.discord img{
width:320px;
border-radius:10px;
filter:brightness(0.9);
}

/* profile */

.profile{
text-align:center;
width:260px;
text-shadow: 0 0 8px rgba(150,120,255,0.15);
}

/* title */

h1{
margin:0;
font-size:32px;
}

/* lyrics */

.subtitle{
font-style:italic;
font-size:16px;
margin:10px 0;
min-height:24px;
opacity:.8;
}

/* visualizer */

.visualizer{
display:flex;
justify-content:center;
align-items:flex-end;
gap:2px;
height:37px;
margin:14px 0;
max-width:420px;
}

.visualizer div{
width:3px;
background:linear-gradient(to top, #6a5cff, #c3b8ff);
height:6px;
}

/* tabs */

.tags{
display:flex;
justify-content:center;
gap:10px;
font-size:14px;
margin-bottom:12px;
}

.tab{
cursor:pointer;
position:relative;
padding-bottom:2px;
transition:opacity .2s ease;
opacity:.7;
}

.tab.active{
opacity:1;
}

/* text */

.music{
font-size:14px;
line-height:1.5;
opacity:1;
transition:opacity .2s ease;
}

/* banner */

.banner{
position:fixed;
bottom:0;
width:100%;
display:flex;
justify-content:center;
}

.banner img{
max-height:200px;
filter:brightness(0.7);
}

/* mobile */

@media (max-width:700px){

.content{
flex-direction:column;
gap:25px;
transform:scale(1);
}

.discord img{
width:240px;
}

}