/* 导航栏样式 */
 .navbar {
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     top: 0;
     width: 100%;
     height: 30px;
     padding: 10px 0;
     background-color: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(5px);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     z-index: 1000;
 }
 .navbar ul a {
    font-weight: 500;
}
 .navbar a {
     color: #333;
     text-decoration: none;
     margin: 0 15px;
     font-weight: 600;
     padding: 10px 20px;
     border-radius: 5px;
     transition: color 0.3s, background-color 0.3s;
 }

 .navbar a:hover {
     color: #007bff;
     background-color: rgba(0, 123, 255, 0.1);
 }

 /* Logo和个人图片样式 */
 .logo,
 .profile-pic {
     width: 40px;
     position: fixed;
 }

 .logo {
     left: 30px;
 }

 .profile-pic {
     right: 30px;
 }

 /* 页脚样式 */
 .footer {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
     background-color: #f1f3f5;
     color: #6c757d;
     text-align: center;
     padding: 30px 0;
     position: relative;
     margin-top: 50px;
 }

 .footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
     height: 1px;
     background-color: #dee2e6;
 }

 .footer a {
     color: #6c757d;
     text-decoration: none;
 }

 .footer a:hover {
     text-decoration: underline;
 }
 .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 999;
    opacity: 0;
    transition: background-color 0.5s ease, backdrop-filter 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}

.overlay.active {
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    opacity: 1;
    pointer-events: auto;
}

 @media screen and (max-width: 768px) {
     .navbar {
         flex-direction: column;
         height: 30px;
         transition: all 0.75s cubic-bezier(0.15, 0.45, 0.05, 1);

     }

     .navbar.active {
         height: 100%;
         border-bottom-right-radius: 25px;
         border-bottom-left-radius: 25px;
         display: flex;
         /* 使用 flexbox 布局 */
         flex-direction: column;
         /* 默认垂直堆叠 */
         align-items: flex-start;
         /* 默认居左对齐 */


     }

     .navbar .navlink {
         opacity: 0.5;
         display: none;
         /* 默认隐藏导航链接 */
         transition: all 0.5s cubic-bezier(0.15, 0.45, 0.05, 1);

     }

     .navbar .navlink.active {
         display: block;
         /* 显示导航链接 */
         opacity: 1;
         /* 设置完全可见 */
         font-size: x-large;
     }

     .navbar a {
         margin: 5px 0;
     }


     .logo {
         position: fixed;
         left: 10px;
     }

     .profile-pic,
     .logo.active {
         position: fixed;
         bottom: 100px;
     }
 }

 /* 夜间模式适配 */
@media (prefers-color-scheme: dark) {
    .navbar {
        background-color: rgba(24, 24, 24, 0.95);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .navbar a {
        color: #e0e0e0;
    }

    .navbar a:hover {
        color: #82aaff;
        background-color: rgba(130, 170, 255, 0.1);
    }

    .footer {
        background-color: #1c1c1c;
        color: #a9a9a9;
    }

    .footer::before {
        background-color: #444;
    }

    .footer a {
        color: #a9a9a9;
    }

    .overlay.active {
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
    }
}