/* 基础样式 */
body {
    font-family: 'Segoe UI', sans-serif;
    /* 设置全局字体为 Segoe UI，备用字体为 sans-serif */
    line-height: 1.6;
    /* 设置全局行高为 1.6，使文本更易读 */
}
 
.background {
    position: fixed;
    /* 固定定位，使背景图始终覆盖整个屏幕 */
    top: 0;
    /* 从顶部开始 */
    left: 0;
    /* 从左侧开始 */
    width: 100%;
    /* 宽度占满整个屏幕 */
    height: 100%;
    /* 高度占满整个屏幕 */
    background: url('/images/background.jpg') center/cover;
    /* 设置背景图路径，居中并充满容器 */
    filter: brightness(0.7);
    /* 降低背景亮度，提升前景内容的可读性 */
    z-index: -1;
    /* 将背景图置于内容层下方 */
}
 
.nav {
    position: fixed;
    /* 固定定位，使导航栏始终在顶部 */
    top: 0;
    /* 从顶部开始 */
    width: 100%;
    /* 导航栏宽度占满整个屏幕 */
    padding: 1rem;
    /* 导航栏内边距，1rem 约等于 16px */
    background: transparent;
    /* 设置导航栏背景为完全透明 */
    display: flex;
    /* 使用弹性布局 */
    justify-content: center;
    /* 水平居中对齐导航项 */
    gap: 2rem;
    /* 导航项之间的间距 */
}
 
.hero {
    min-height: 100vh;
    /* 最小高度为视口高度，确保内容占满整个屏幕 */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: column;
    /* 子元素垂直排列 */
    align-items: center;
    /* 水平居中对齐子元素 */
    justify-content: center;
    /* 垂直居中对齐子元素 */
    text-align: center;
    /* 文本内容居中对齐 */
}
 
.avatar {
    width: 150px;
    /* 头像宽度 */
    height: 150px;
    /* 头像高度 */
    border-radius: 50%;
    /* 圆角半径为 50%，使头像呈圆形 */
    margin: 1rem;
    /* 头像外边距 */
    border: 3px solid #2A4365;
    /* 头像边框，颜色为深蓝色 */
    margin-top: -200px;
}
 
.skill-grid {
    display: grid;
    /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* 根据容器宽度自动调整列数，每列最小宽度为 120px */
    gap: 1rem;
    /* 网格单元之间的间距 */
    padding: 2rem;
    /* 网格内边距 */
}
 
.skill-card {
    padding: 1rem;
    /* 卡片内边距 */
    background: #f3f4f6;
    /* 卡片背景色为浅灰色 */
    border-radius: 8px;
    /* 卡片圆角 */
    text-align: center;
    /* 卡片内容居中对齐 */
    transition: transform 0.3s;
    /* 添加过渡效果，使卡片在鼠标悬停时平滑移动 */
}
 
.skill-card:hover {
    transform: translateY(-5px);
    /* 鼠标悬停时，卡片向上移动 5px，产生悬浮效果 */
}