body{

font-family:Arial;
margin:0;
background:#0f172a;
color:white;

}

.banner{

background:#f59e0b;
color:black;
text-align:center;
padding:12px;
font-weight:bold;

}

header{

background:#111827;
padding:15px;

}

nav a{

color:white;
margin-right:15px;
text-decoration:none;

}

.container{

max-width:1100px;
margin:auto;
padding:20px;

}

.hero{

background:linear-gradient(135deg,#2563eb,#06b6d4);
padding:60px;
border-radius:10px;
text-align:center;

}

.login-box{

background:#1f2937;
padding:20px;
margin-top:20px;
border-radius:10px;

}

.login-box input{

width:100%;
padding:10px;
margin-top:10px;
border:none;
border-radius:6px;

}

.login-box button{

margin-top:10px;
padding:10px;
width:100%;
background:#2563eb;
border:none;
color:white;
border-radius:6px;

}

.users{

display:flex;
gap:20px;
margin-top:20px;
flex-wrap:wrap;

}

.user-card{

flex:1;
background:#1f2937;
padding:15px;
border-radius:10px;
text-align:center;

}

.user-card img{

width:100%;
max-width:200px;
border-radius:10px;

}

.side-area{

display:flex;
gap:20px;
margin-top:20px;
flex-wrap:wrap;

}

.side-left{

flex:1;

}

.side-center{

flex:2;

}

.side-right{

flex:1;

}

.side-card{

background:#1f2937;
padding:15px;
border-radius:10px;
margin-bottom:20px;

}

.side-btn{

display:block;
width:100%;
margin-top:8px;
padding:10px;
background:#374151;
border:none;
border-radius:6px;
color:white;
cursor:pointer;

}

.side-btn:hover{

background:#2563eb;

}

.article{

background:#1f2937;
padding:20px;
border-radius:10px;

}

footer{

background:#111827;
text-align:center;
padding:20px;
margin-top:40px;

}

.mobile-menu{

display:flex;
justify-content:space-around;
background:#111827;
padding:10px;
position:fixed;
bottom:0;
width:100%;

}

.mobile-menu a{

color:white;
text-decoration:none;

}