* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        :root{
            --gradient-sun:linear-gradient(120deg, rgb(255, 39, 1), #547ff7 30%, rgb(0, 0, 0) 70%);
            --gradient-moon:linear-gradient(120deg, rgb(255, 39, 1), #547ff7 30%, rgb(255, 255, 255) 70%);
        }
        body {
           
            min-height: 100vh;
            position: relative;
            /* transition: padding-left 0.3s ease; */
            padding-left: 250px;
            background-color: white;
            background-image:url('img/sun.webp');
            background-size:cover;
            background-position:bottom center;
            /* transition:all 0.3s ease; */
           
        }
		body.dark{
            background-image:none;
            background-color:black;
		}
        .sidebar {
            width: 250px;
            max-width: 250px;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            transition: transform 0.3s ease;
            z-index: 98;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(12px);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 135, 255, 0.1);
        }
        .user-profile {
            padding: 20px 20px;
            border-bottom: 1px solid rgb(255, 255, 255,0.5);
        }
        .user-profile svg{
            width: 16px;
            height: 16px;
            font-size: 18px;
            margin-right: 10px;
            
        }  
        .user-main{
            width: 100%;
            height: auto;
            display: flex;
            text-align: center;
            justify-content: center;
            flex-direction: column;
            color:white;
        }
        .avatar {
            width: 90px;
            height: 90px; 
            margin: 0 auto 15px;
            border-radius: 50%;
            box-shadow:0 10px 12px linear-gradient(pink,lightblue);
        }
		.avatar img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			object-fit: cover;
            overflow: hidden;
			box-shadow:0 0 5px rgb(177, 233, 252);
        }
        .user-name {
            font-family: 'Zhi Mang Xing';
            font-size: 20px; 
        }
        .user-message{
            display:flex;
            flex-direction: column;
            font-size: 14px;
            color: rgb(0, 0, 0);
            margin-top:10px;
         }
        .user-message.dark{
            color:#547ff7;
        }
       .gradientText {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200%;
        background-position: 0%;
        animation: backgroundSizeAnimation 6s ease-in-out infinite;
        background-image:  var(--gradient-sun);
        }
		.gradientText.dark{
            background-image:  var(--gradient-moon);
        }
        
		.zhi-mang-xing-regular {
		  font-family: "Zhi Mang Xing", cursive;
		  font-weight: 400;
		  font-style: normal;
		}


        @keyframes backgroundSizeAnimation {
        0% {
            background-position: 100%;
        }
        25% {
            background-position: 50%;
        }
        50% {
            background-position: 0%;
        }
        75% {
            background-position: 50%;
        }
        100% {
            background-position: 100%;
        }
}
        .menu {
            list-style: none;
            padding: 20px 0;
            color:black;
           
        }
        .menu.dark{
            color:#547ff7;
        }
        .menu label {
           line-height: 25px;
            padding: 14px 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            gap: 12px;
        }
        .menu a{
            border: none;
            width:50px;
            background: none;
        }
        .menu label:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #000000;
            padding-left: 30px;
            box-shadow:0 0 5px white;
        }
        .menu label:active{
			transform:translateY(3px);
            background:none;
		}
        .sidebar.closed {
            transform: translateX(-100%);
        }
        body.sidebar-closed {
            padding-left: 0;
        }
        .main-content {
            flex:1;
            text-align: center;
            padding: 30px;
            min-height: 100vh;
        }
        .theme{
             background: none;
             border:none;
             position: fixed;
             left: 80%;
             top:190px;
             
        }
        .theme.dark{
            color:white; 
        }
        .theme svg{
            width:30px;
            height:30px;
            
        }
        .bkBtn{
            display: none;
        }
        .bkBtn.active{
            display: block;
        }
        .menu-btn {
            /*background: linear-gradient(135deg, #3b82f6, #1e40af);*/
			background:none;
            border: none;
            
            cursor: pointer;
            position: fixed;
            left: 250px;
            z-index: 99;
            transition: left 0.3s ease, transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .menu-btn.dark{
            color:white;
        }
        body.sidebar-closed .menu-btn {
            left: 2px;
        }
        .show{
            display:none;
        }
        #show.active{
            display:block;
        }
		
        @media (max-width: 768px) {
            body {
                padding-left: 0;
            }
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.open {
                transform: translateX(0);
            }
            .menu-btn {
                left: 2px;
            }
            .sidebar.open ~ .menu-btn {
                left: 230px;
            }
        }