body{

margin:0;

background:#090f20;

color:white;

font-family:Arial;

}

header{

display:flex;

justify-content:space-between;

padding:25px;

}

nav a{

color:white;

text-decoration:none;

margin-left:20px;

}

.hero{

height:80vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

button{

padding:15px 30px;

border:none;

border-radius:16px;

background:#8b3dff;

color:white;

}

.stories{

padding:60px;

}

.cards{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(260px,1fr)
);

gap:20px;

}

.story{

padding:25px;

background:#121b36;

border-radius:20px;

}

.story button{

margin-top:20px;

width:100%;

}

.player{

margin-top:40px;

padding:30px;

background:#10182f;

border-radius:20px;

}

#progress{

width:100%;

margin-top:20px;

}

.extra{

padding:60px;

}

.user-box{

display:flex;

align-items:center;

gap:20px;

background:#121b36;

padding:25px;

border-radius:20px;

margin-bottom:40px;

}

.avatar{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

background:#8b3dff;

border-radius:50%;

}

#favorites,
#trendList{

display:grid;

gap:15px;

margin-top:20px;

}

.favorite-card{

background:#10182f;

padding:20px;

border-radius:16px;

}

.admin{

padding:60px;

}

.login,
#panel{

display:flex;

flex-direction:column;

gap:15px;

max-width:500px;

}

input{

padding:16px;

border:none;

border-radius:14px;

background:#10182f;

color:white;

}

#dynamicStories{

margin-top:30px;

display:grid;

gap:20px;

}

.dynamic{

padding:20px;

background:#121b36;

border-radius:18px;

}

.dynamic button{

margin-top:15px;

}