/* ===========================
   CINEFLEX PROFILE SYSTEM
=========================== */

#profile-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#141414;
display:none;
justify-content:center;
align-items:center;
flex-direction:column;
z-index:999999;
animation:fadeIn .4s;
}

#profile-screen.active{
display:flex;
}

#profile-title{
color:white;
font-size:2rem;
font-weight:bold;
margin-bottom:40px;
}

#profile-list{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
max-width:900px;
}

.profile-card{
cursor:pointer;
transition:.25s;
text-align:center;
}

.profile-card:hover{
transform:scale(1.08);
}

.profile-avatar{
width:130px;
height:130px;
border-radius:8px;
overflow:hidden;
border:4px solid transparent;
}

.profile-card:hover .profile-avatar{
border-color:#e50914;
}

.profile-avatar img{
width:100%;
height:100%;
object-fit:cover;
}

.profile-name{
margin-top:10px;
color:#ddd;
font-size:18px;
}

.add-profile{
display:flex;
justify-content:center;
align-items:center;
background:#222;
font-size:50px;
color:#888;
}

.add-profile:hover{
background:#333;
color:white;
}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}