.navbar * {
    margin: 0; /* 去除所有子元素的外边距 */
    padding: 0; /* 去除所有子元素的内边距 */
    box-sizing: border-box; /* 统一盒模型计算方式 */
}

.navbar {
    background: rgba(255,255,255,0.80); /* 半透明白色背景 */
    color: #000; /* 字体颜色为黑色 */
    padding: 1rem; /* 内边距1rem */
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    height: 4vh; /* 高度为4vh */
    position: fixed; /* 固定在页面顶部 */
    top: 0; /* 顶部距离为0 */
    left: 0; /* 左侧距离为0 */
    width: 100%; /* 宽度100% */
    z-index: 1000; /* 保证导航栏在最上层 */
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); /* 底部阴影 */
}

.logo {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    flex-shrink: 0; /* 不缩小logo */
    margin-right: auto; /* 右侧自动外边距，推到最左 */
}

.logo a {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    text-decoration: none; /* 去除下划线 */
    color: #000000; /* 链接颜色为黑色 */
}

.logo img {
    height: 5.25vh; /* logo图片高度5.25vh */
    margin-right: 10px; /* 右侧间距10px */
}

.logo p {
    font-size: 4vh; /* 字体大小4vh */
}
    
.nav-links {
    display: flex; /* 使用flex布局 */
    list-style: none; /* 去除列表样式 */
    gap: 1.5rem; /* 子元素间距1.5rem */
    margin-right: 2rem; /* 右侧外边距2rem */
}
        
.menu-button {
    display: none; /* 默认隐藏菜单按钮 */
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    color: #000; /* 字体颜色为黑色 */
    font-size: 4vh; /* 字体大小1.5rem */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    margin-right: 2rem; /* 右侧外边距2rem */
    transition: color 0.2s, transform 0.2s; /* 过渡效果 */
    border-radius: 50%; /* 圆形边框 */
    padding: 0.3em 0.5em; /* 内边距0.3em 0.5em */
}

.menu-button:hover,
.menu-button:focus {
    color: #9996ed; /* 悬停时颜色变化 */
    transform: translateY(-2px) scale(1.08); /* 悬停时微微上移并放大 */
}

.nav-links a {
    color: #000; /* 字体颜色为黑色 */
    display: inline-block; /* 变为块级元素以支持内边距和边距 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.2s, transform 0.2s; /* 过渡效果 */
}

.nav-links a:hover,
.nav-links a:focus {
    color: #9996ed; /* 悬停时颜色变化 */
    transform: translateY(-2px) scale(1.08); /* 悬停时微微上移并放大 */
}
        
@media (max-width: 768px) {
    .nav-links {
        display: none; /* 默认隐藏导航链接 */
        flex-direction: column; /* 纵向排列 */
        position: absolute; /* 绝对定位 */
        top: 60px; /* 距离顶部60px */
        width: 100%; /* 宽度100% */
        background: #fff; /* 背景色为白色 */
        padding: 1rem; /* 内边距1rem */
        text-align: center; /* 文本居中 */
        box-shadow: 0 8px 24px rgba(0,0,0,0.18); /* 底部阴影 */
    }
            
    .menu-button {
        display: block; /* 显示菜单按钮 */
    }
            
    .nav-links.active {
        display: flex; /* 激活状态下显示导航链接 */
    }
}