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

body{
font-family:'Poppins',sans-serif;
background: linear-gradient(-45deg,#4158D0,#C850C0,#FFCC70);
background-size:400% 400%;
animation: gradientAnim 15s ease infinite;
color:white;
min-height:100vh;
display:flex;
flex-direction:column;
}

header{
text-align:center;
padding:20px;
font-size:30px;
position:relative;
}

.theme-btn{
position:absolute;
top:20px;
right:20px;
font-size:24px;
background:none;
border:none;
color:white;
cursor:pointer;
}

.top-nav{
display:flex;
justify-content:center;
gap:20px;
padding:15px;
background:rgba(0,0,0,0.3);
}

.nav-btn{
background:none;
border:none;
color:white;
font-weight:bold;
cursor:pointer;
}

.nav-btn.active{
border-bottom:3px solid #667eea;
}

.section{
flex:1;
display:none;
padding:40px 50px;
}

.section.active{
display:block;
}

.about-img{
width:300px;
height:300px;
object-fit:cover;
border-radius:100%;
margin-top:20px;
border:3px solid white;
}

.activities-container{
display:flex;
height:80vh;
gap:20px;
}

.activity-sidebar{
width:250px;
background:rgba(255,255,255,0.1);
padding:20px;
border-radius:15px;
display:flex;
flex-direction:column;
gap:10px;
overflow:auto;
}

.accordion-btn{
padding:12px;
border:none;
border-radius:10px;
background:rgba(255,255,255,0.25);
color:white;
cursor:pointer;
font-weight:bold;
}

.accordion-content{
max-height:0;
overflow:hidden;
display:flex;
flex-direction:column;
gap:10px;
transition:max-height 0.4s ease;
}

.accordion-content button{
padding:10px;
border:none;
border-radius:10px;
background:rgba(255,255,255,0.2);
color:white;
cursor:pointer;
}

.accordion-content.show{
max-height:500px;
}

.display-area{
flex:1;
background:white;
color:#333;
border-radius:15px;
padding:20px;
overflow:auto;
}

footer{
text-align:center;
padding:15px;
background:rgba(0,0,0,0.3);
}

body.dark{
background:linear-gradient(-45deg,#0f0c29,#302b63,#24243e);
background-size:400% 400%;
}

.dark .display-area{
background:#1a1a1a;
color:white;
}

@keyframes gradientAnim{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}