:root {
    --sidebar-bg: #ffffff;
    --sidebar-text: #374151;
    --main-bg: #f1f5f9;
    --main-text: #111827;

    --theme-bg: #1e293b;

    --theme-social-linkedin: #0077b5;
    --theme-social-github: #181717;
    --theme-social-researchgate: #00ccbb;

    --theme-card-bg: #ffffff;
    --theme-card-shadow: 0 2px 6px rgba(0,0,0,0.08);
    --theme-card-text: #1f2937;
    --theme-card-meta-dark: #555;
    --theme-card-meta-light: #777;
    --theme-card-link: #6366f1;
    --theme-card-link-hover: #4f46e5;    

    --theme-content-divider: rgba(0,0,0,0.08);

}

body.dark {
    --sidebar-bg: #0f172a;
    --sidebar-text: #f1f5f9;
    --main-bg: #1e293b;
    --main-text: #e2e8f0;

    --theme-bg: #f1f5f9;

    --theme-social-linkedin: #ffffff;
    --theme-social-github: #ffffff;
    --theme-social-researchgate: #ffffff;

    --theme-card-bg: #334155;
    --theme-card-shadow: 0 2px 6px rgba(255,255,255,0.05);
    --theme-card-text: #f1f5f9;
    --theme-card-meta-dark: #cbd5e1;
    --theme-card-meta-light: #94a3b8;
    --theme-card-link: #6366f1;
    --theme-card-link-hover: #4f46e5;

    --theme-content-divider: rgba(255,255,255,0.1);
}

.theme-btn:hover {
    transform: rotate(20deg) scale(1.1);
}

.icon{
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.theme-btn .sun{
    opacity: 1;
}

body.dark .theme-btn .sun{
    opacity: 0;
}

body.dark .theme-btn .moon{
    opacity: 1;
}

/* Button to Change Theme*/
.theme-btn{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--theme-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.5s;
}