/* BASIC RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, sans-serif;
}

/* BODY */
body{
    background:#3f51b5;
    color:white;
    transition:0.5s;
}

body.dark{
    background:#121212;
    color:white;
}

/* HEADER */
header{
    text-align:center;
    padding:20px;
    background:#283593;
    transition:0.5s;
}

body.dark header{
    background:#1a1a1a;
}

/* NAVIGATION */
.top-nav{
    display:flex;
    justify-content:center;
    gap:15px;
    background:#3949ab;
    padding:10px;
    transition:0.5s;
}

body.dark .top-nav{
    background:#222;
}

.nav-btn{
    padding:10px 15px;
    border:none;
    background:#5c6bc0;
    color:white;
    cursor:pointer;
    border-radius:5px;
    transition:0.5s;
}

body.dark .nav-btn{
    background:#444;
    color:white;
}

.nav-btn.active{
    background:#ffd54f;
    color:black;
}

/* SECTIONS */
.section{
    display:none;
    padding:40px;
}

.section.active{
    display:block;
}

/* ABOUT IMAGE */
.about-img{
    width:150px;
    border-radius:50%;
    margin:20px 0;
}

/* ACTIVITIES LAYOUT */
.activities-container{
    display:flex;
    gap:20px;
}

/* Sidebar */
.activity-sidebar{
    width:250px;
    background:rgba(0,0,0,0.3);
    padding:15px;
    border-radius:10px;
    transition:0.5s;
}

body.dark .activity-sidebar{
    background:rgba(255,255,255,0.05);
}

/* DROPDOWN */
.dropdown{
    margin-bottom:15px;
}

.dropbtn{
    width:100%;
    padding:10px;
    border:none;
    border-radius:5px;
    background:#5c6bc0;
    color:white;
    cursor:pointer;
    text-align:left;
    font-weight:bold;
    transition:0.3s;
}

body.dark .dropbtn{
    background:#444;
}

.dropdown-content{
    display:none;
    flex-direction: column;
    margin-top:5px;
}

.dropdown-content button{
    padding:10px;
    margin-bottom:5px;
    border:none;
    border-radius:5px;
    background:#7986cb;
    color:white;
    cursor:pointer;
}

body.dark .dropdown-content button{
    background:#666;
    color:white;
}

.dropdown-content button:hover{
    background:#9fa8da;
}

/* DISPLAY AREA */
.display-area{
    flex:1;
    background:white;
    color:black;
    padding:20px;
    border-radius:10px;
    min-height:300px;
    transition:0.5s;
}

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

/* FOOTER */
footer{
    text-align:center;
    padding:15px;
    background:#283593;
    margin-top:40px;
    transition:0.5s;
}

body.dark footer{
    background:#1a1a1a;
}