/* 全局样式重置：清除所有元素默认的margin和padding，统一盒模型 */
* {
    margin: 0; /* 外边距清零 */
    padding: 0; /* 内边距清零 */
    box-sizing: border-box; /* 盒模型：宽高包含内边距和边框，更易布局 */
    /* 字体：优先微软雅黑，其次苹方，最后通用无衬线字体，保证跨平台显示一致 */
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 页面主体样式 */
body {
    line-height: 1.8; /* 行高：提升文字阅读舒适度 */
    color: #333; /* 文字主色：深灰色，比纯黑更柔和 */
    background: #f8f9fa; /* 页面背景色：浅灰色，比纯白更护眼 */
}

/* 导航栏样式：固定在顶部 */
nav {
    position: fixed; /* 固定定位：滚动页面时导航栏保持在顶部 */
    top: 0; /* 距离顶部0像素 */
    left: 0; /* 距离左侧0像素 */
    width: 100%; /* 宽度100%，铺满屏幕 */
    background: rgba(34, 34, 34, 0.95); /* 背景色：深灰色半透明（0.95透明度） */
    padding: 1rem 2rem; /* 内边距：上下1rem，左右2rem（rem是相对字体大小的单位） */
    text-align: center; /* 文字居中对齐 */
    z-index: 1000; /* 层级：确保导航栏在其他元素上方 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影：增加立体感，x偏移0，y偏移2px，模糊10px，黑色半透明 */
}
/* 导航栏链接样式 */
nav a {
    color: white; /* 文字颜色：白色 */
    margin: 0 1.5rem; /* 外边距：左右1.5rem，拉开链接间距 */
    text-decoration: none; /* 去掉下划线 */
    font-size: 1.1rem; /* 字体大小 */
    transition: color 0.3s ease; /* 过渡效果：颜色变化0.3秒，ease缓动 */
}
/* 导航链接hover（鼠标悬停）效果 */
nav a:hover {
    color: #0078ff; /* 文字颜色变为蓝色 */
}

/* 首屏区域样式 */
header {
    /* 背景渐变：135度角，从浅蓝(#667eea)到紫蓝(#764ba2) */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; /* 文字颜色：白色 */
    padding: 8rem 2rem 6rem; /* 内边距：上8rem，左右2rem，下6rem */
    text-align: center; /* 文字居中 */
    margin-top: 60px; /* 上外边距：避开固定导航栏，防止内容被遮挡 */
}
/* 首屏主标题 */
header h1 {
    font-size: 3rem; /* 字体大小 */
    margin-bottom: 1rem; /* 下外边距：和副标题拉开距离 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影：增加层次感 */
}
/* 首屏副标题 */
header p {
    font-size: 1.3rem; /* 字体大小 */
    margin-bottom: 2.5rem; /* 下外边距：和按钮拉开距离 */
    opacity: 0.9; /* 透明度：0.9，稍微弱化，突出主标题 */
}
/* 按钮样式 */
.btn {
    background: white; /* 背景色：白色 */
    color: #667eea; /* 文字颜色：渐变起始蓝 */
    padding: 1rem 2.5rem; /* 内边距：上下1rem，左右2.5rem */
    border-radius: 50px; /* 圆角：50px，实现胶囊按钮 */
    text-decoration: none; /* 去掉下划线 */
    font-weight: bold; /* 字体加粗 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
    transition: all 0.3s ease; /* 过渡效果：所有属性变化0.3秒 */
}
/* 按钮hover效果 */
.btn:hover {
    transform: translateY(-3px); /* 向上平移3px */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* 阴影放大，增加悬浮感 */
}

/* 通用内容区域样式（关于我、项目） */
section {
    max-width: 1000px; /* 最大宽度：1000px，防止大屏下内容过宽 */
    margin: 0 auto; /* 上下0，左右auto：实现水平居中 */
    padding: 6rem 2rem; /* 内边距：上下6rem，左右2rem */
}
/* 内容区域标题 */
section h2 {
    text-align: center; /* 居中 */
    margin-bottom: 3rem; /* 下外边距：和内容拉开距离 */
    font-size: 2.5rem; /* 字体大小 */
    color: #222; /* 文字颜色：深灰 */
    position: relative; /* 相对定位：为伪元素定位做准备 */
}
/* 标题下方的装饰线（伪元素） */
section h2::after {
    content: ""; /* 伪元素必须有content，空内容 */
    display: block; /* 块级元素：独占一行 */
    width: 60px; /* 宽度：60px */
    height: 3px; /* 高度：3px */
    background: #667eea; /* 背景色：渐变蓝 */
    margin: 1rem auto 0; /* 上下1rem，左右auto：居中 */
}
/* 内容区域普通文本 */
section p {
    font-size: 1.1rem; /* 字体大小 */
    color: #555; /* 文字颜色：中灰色 */
    margin-bottom: 1.5rem; /* 下外边距：段落之间拉开距离 */
    text-align: center; /* 居中 */
}

/* 项目卡片样式 */
.project {
    background: white; /* 背景色：白色 */
    border-radius: 12px; /* 圆角：12px */
    padding: 2rem; /* 内边距：2rem */
    margin-bottom: 3rem; /* 下外边距：卡片之间拉开距离 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 阴影：轻微立体感 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果：平移和阴影 */
}
/* 项目卡片hover效果 */
.project:hover {
    transform: translateY(-5px); /* 向上平移5px */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* 阴影放大 */
}
/* 项目图片 */
.project img {
    max-width: 100%; /* 最大宽度：100%，适配容器 */
    height: auto; /* 高度自动：保持图片比例 */
    border-radius: 8px; /* 圆角：8px */
    margin-bottom: 1.5rem; /* 下外边距：和标题拉开距离 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 图片阴影 */
}
/* 项目名称 */
.project h3 {
    font-size: 1.8rem; /* 字体大小 */
    margin-bottom: 1rem; /* 下外边距 */
    color: #222; /* 文字颜色 */
}
/* 项目描述文本 */
.project p {
    text-align: left; /* 左对齐：更适合阅读长文本 */
    color: #666; /* 文字颜色：浅灰 */
}

/* 联系我区域样式 */
#contact {
    background: #222; /* 背景色：深灰色 */
    color: white; /* 文字颜色：白色 */
    padding: 6rem 2rem; /* 内边距 */
    text-align: center; /* 居中 */
}
/* 联系我区域标题 */
#contact h2 {
    color: white; /* 标题颜色改为白色 */
}
/* 联系我区域文本 */
#contact p {
    color: #ccc; /* 文字颜色：浅灰色 */
    font-size: 1.2rem; /* 字体大小 */
    margin-bottom: 1rem; /* 下外边距 */
}
/* 联系我区域链接 */
#contact a {
    color: #0078ff; /* 链接颜色：蓝色 */
    text-decoration: none; /* 去掉下划线 */
}

/* 页脚样式 */
footer {
    background: #111; /* 背景色：纯黑 */
    color: #888; /* 文字颜色：浅灰色 */
    text-align: center; /* 居中 */
    padding: 2rem; /* 内边距 */
    font-size: 0.9rem; /* 字体大小：稍小 */
}
/* 页脚链接 */
footer a {
    color: #0078ff; /* 链接颜色：蓝色 */
    text-decoration: none; /* 去掉下划线 */
}

/* 全局平滑滚动：点击锚点链接时，页面平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 复制电话样式（全局生效，移出媒体查询） */
.copy-phone {
    color: #0078ff; /* 电话文字颜色：蓝色 */
    cursor: pointer; /* 鼠标悬停变成手型，提示可点击 */
    font-weight: bold; /* 加粗，突出显示 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
}
.copy-phone:hover {
    color: #0056b3; /* 悬停时颜色变深 */
    text-decoration: underline; /* 悬停时下划线，提示可点击 */
}
/* 复制提示文字样式（全局生效） */
.copy-tip {
    color: #666; /* 提示文字颜色：浅灰色 */
    font-size: 0.9rem; /* 字体稍小 */
    margin-left: 0.5rem; /* 左边距，和电话拉开距离 */
}

/* 移动端适配：媒体查询，屏幕宽度≤768px时生效（独立闭合） */
@media (max-width: 768px) {
    /* 移动端导航链接 */
    nav a {
        margin: 0 0.8rem; /* 减小间距 */
        font-size: 1rem; /* 减小字体 */
    }
    /* 移动端首屏标题 */
    header h1 {
        font-size: 2.2rem; /* 减小字体 */
    }
    /* 移动端首屏副标题 */
    header p {
        font-size: 1.1rem; /* 减小字体 */
    }
    /* 移动端内容区域 */
    section {
        padding: 4rem 1.5rem; /* 减小内边距 */
    }
    /* 移动端内容标题 */
    section h2 {
        font-size: 2rem; /* 减小字体 */
    }
    /* 移动端项目卡片 */
    .project {
        padding: 1.5rem; /* 减小内边距 */
    }
}