body{
    margin:0;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0a0a0a;
    font-family:Arial;
    color:white;
}

.card{
    background:#111;
    padding:40px;
    border-radius:15px;
    text-align:center;
    width:300px;
    box-shadow:0 0 20px rgba(0,0,0,0.7);
}

.avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    margin-bottom:10px;
}

.bio{
    color:#aaa;
}

.links{
    margin-top:20px;
}

.links a{
    display:block;
    margin:8px;
    padding:10px;
    background:#1c1c1c;
    border-radius:8px;
    text-decoration:none;
    color:white;
    transition:0.2s;
}

.links a:hover{
    background:#333;
}
.volume-control{
position:fixed;
top:20px;
left:20px;
display:flex;
align-items:center;
gap:10px;
flex-direction: row;
}

.volume-icon{
font-size:25px;
cursor:pointer;
}

#volumeSlider{
width:0px;
opacity:0;
transition:0.3s;
}

.volume-control:hover #volumeSlider{
width:120px;
opacity:1;
}

.splash-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#0a0a0a;
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
cursor:pointer;
transition:opacity 0.5s;
}

.splash-content{
text-align:center;
}

.splash-content h1{
font-size:48px;
margin-bottom:20px;
}

.splash-content p{
font-size:24px;
color:#888;
animation:pulse 2s infinite;
}

@keyframes pulse{
0%,100%{opacity:1;}
50%{opacity:0.5;}
}