* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background: #0f172a;
color: #e5e7eb;
}

header {
background: #111827;
padding: 1.5rem;
text-align: center;
border-bottom: 2px solid #334155;
}

header h1 {
letter-spacing: 2px;
}
/*
h1{
text-align:center;
margin-bottom:30px;
}
*/

.layout {
display: flex;
min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
width: 250px;
background: #1f2937;
padding: 1rem;
}

.sidebar h2 {
margin-bottom: 1rem;
font-size: 1rem;
color: #93c5fd;
}

.sidebar a {
display: block;
color: #e5e7eb;
text-decoration: none;
padding: 10px;
margin-bottom: 8px;
background: #111827;
border-radius: 6px;
transition: 0.2s;
}

.sidebar a:hover {
background: #2563eb;
}

/* MAIN CONTENT */

.content {
flex: 1;
padding: 2rem;
/*max-width:900px;*/
/*margin:auto;*/
}

.board-title {
font-size: 2rem;
margin-bottom: 1rem;
}

.post {
background: #1e293b;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 8px;
border: 1px solid #334155;
}

.post h3 {
margin-bottom: 0.5rem;
color: #60a5fa;
}

.post small {
color: #94a3b8;
}

/* RESPONSIVE */
@media (max-width: 768px) {
.layout {
flex-direction: column;
}

.sidebar {
width: 100%;
}
}


/* ------------  accordian ---------------- */





.accordion{
border:1px solid #ccc;
margin-bottom:10px;
background:white;
background-color: #334155;
}

.accordion-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px;
cursor:pointer;
background: #1e293b;
color:white;
transition:.3s;
}

.accordion-header:hover{
background: #111827;
border-radius: 5rem;
}

.post-title{
font-size:1.2em;
font-weight:bold;
}

.post-author{
font-size:.9em;
color:#d8d8d8;
}

.accordion-content{
display:none;
padding:20px;
line-height:1.7;
border-top:1px solid #ddd;
}

.active .accordion-header{
background: #1e293b;
border-radius: 5rem;
}

.active .post-author{
color:white;
}

/*  ---------------------end accordian ---------------------*/