/* 基础重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* 响应式变量 */
        :root {
            --main-color: #2c3e50;
            --accent-color: #3498db;
            --text-color: #333;
            --gutter: 15px;
            --max-width: 1200px;
        }

        body {
            line-height: 1.6;
            color: var(--text-color);
            background: #f8f9fa;
        }

        /* 通用容器 */
        .container {
            width: 95%;
            padding-right: var(--gutter);
            padding-left: var(--gutter);
            margin-right: auto;
            margin-left: auto;
            max-width: var(--max-width);
            position: relative;
            top: -40px;  /* 通过相对定位上移 */
            margin-top: 5%;
            z-index: 1;  /* 确保内容在图片上层 */
        }

        /* 响应式网格 */
        .grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            text-align: center;
            height: 100%;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card h4{
            padding-top: 1rem;
            color: gray;

        }
        .card h2{
            padding-top: 0.5rem;

        }

        .card p{
            padding-top: 0.5rem;

        }
        /* 响应式图片 */
        .responsive-img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* 媒体查询 */
        @media (max-width: 992px) {
            :root {
                --gutter: 10px;
            }

            .nav-links {
                display: none; /* 移动端隐藏导航链接 */
            }

            .menu-toggle {
                display: block !important;
            }
        }

        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }

            .card {
                margin-bottom: 1rem;
            }
        }

        @media (min-width: 1200px) {
            :root {
                --max-width: 1200px;
            }
        }

         /* 头像 */

        .avatar-container {
            position: absolute;
            top: -2.5rem;  /* 根据图片高度调整 */
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .avatar-frame {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            /* border: 4px solid white; */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            overflow: hidden;
            background: #f8f9fa;
        }

        .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 调整容器位置 */