body{

margin:0;
font-family:"Playpen Sans",sans-serif;

height:100vh;
display:flex;
align-items:center;
justify-content:center;

background:url("../background.gif") center/cover no-repeat fixed;

}

/* CARD */
.background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:url("../background.gif") center/cover no-repeat;

filter:blur(5px);   /* blur amount */
transform:scale(1.25); /* prevents edge cut from blur */

z-index:-1;
}
.card{

width:420px;
padding:40px;
border-radius:22px;

text-align:center;

background:rgba(30,30,30,0.55);
backdrop-filter:blur(14px);

color:white;

box-shadow:
0 20px 60px rgba(0,0,0,0.35),
0 0 25px rgba(255,255,255,0.05);

transition:0.3s;

}

.card:hover{

box-shadow:
0 25px 70px rgba(0,0,0,0.45),
0 0 35px rgba(255,255,255,0.08);

}

/* CLOCK */

.clock-box{

display:inline-block;

padding:10px 18px;

background:rgba(255,255,255,0.18);
border-radius:14px;

backdrop-filter:blur(6px);

margin-bottom:20px;

font-size:16px;
font-weight:600;

}

#date{
margin-left:6px;
opacity:0.85;
}

/* PROFILE ROW */

.profile-row{

display:flex;
align-items:center;
justify-content:center;

gap:14px;

margin-bottom:5px;

}

/* AVATAR */

.avatar{

width:70px;
height:70px;

border-radius:50%;

box-shadow:0 5px 20px rgba(0,0,0,0.4);

}

/* NAME */

.name{

font-weight:700;
font-size:38px;
margin:0;

}

/* BIO */

.bio{

opacity:0.9;
margin-bottom:20px;

}
/* ENTER SCREEN */

#enter-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,0.55);
backdrop-filter:blur(10px);

color:white;
font-size:28px;
font-weight:600;

cursor:pointer;
z-index:999;

transition:opacity 0.5s;
}
/* DISCORD */

.discord-card img{

width:100%;
border-radius:14px;
margin-top:10px;

}
/* MUSIC PLAYER */

.music-player{
margin-top:20px;
display:flex;
justify-content:center;
}

#volume{

width:160px;
appearance:none;
height:6px;

background:rgba(255,255,255,0.25);
border-radius:10px;

outline:none;
cursor:pointer;

backdrop-filter:blur(6px);

}

/* slider knob */

#volume::-webkit-slider-thumb{
appearance:none;
width:14px;
height:14px;

border-radius:50%;
background:white;

box-shadow:0 0 6px rgba(255,255,255,0.6);
}

#volume::-moz-range-thumb{
width:14px;
height:14px;

border-radius:50%;
background:white;
border:none;
}
/* SOCIALS */

.socials{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
}

.socials img{
width:28px;
height:28px;
opacity:0.8;
transition:0.25s;
cursor:pointer;
}

.socials img:hover{
opacity:1;
transform:translateY(-4px) scale(1.1);
filter:drop-shadow(0 0 6px rgba(255,255,255,0.6));
}

/* ICONS */
.timezone{
opacity:0.8;
margin-left:4px;
font-size:14px;
}
.socials img{

width:30px;
transition:
transform 0.25s,
filter 0.25s;

}

/* ICON HOVER */

.socials img:hover{

transform:translateY(-5px) scale(1.15);

filter:brightness(1.3)
drop-shadow(0 5px 10px rgba(0,0,0,0.4));

}