/* 通用样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全局样式规定 */
html {
    font-size: 16px;  /* 基本字体大小，1rem = 16px */
    line-height: 1.5;  /* 行高 */
}

/* 各级标题 */
h1 { font-size: 2rem; }      /* 32px */
h2 { font-size: 1.75rem; }   /* 28px */
h3 { font-size: 1.5rem; }    /* 24px */
h4 { font-size: 1.25rem; }   /* 20px */
h5 { font-size: 1rem; }      /* 16px */
h6 { font-size: 0.875rem; }  /* 14px */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* 体设置 */
body {
    font-family: Arial, sans-serif;  /* 字体设置 */
    color: #333;  /* 全局字体颜色 */
    background-image: url("images/background.jpg?version=20240320001");  /* 背景图片 */
    background-size: cover;  /* 背景尺寸 */
    background-position: center;  /* 背景位置 */
    background-attachment: fixed;  /* 固定背景 */
    max-width: 100%;  /* 最大宽度 */
    overflow-x: hidden;  /* 隐藏水平滚动条 */
}

/* 链接样式 */
a {
    color: #007BFF;  /* 链接颜色 */
    transition: color 0.2s ease-in-out;  /* 颜色过渡效果 */
}

/* 链接悬停样式 */
a:hover {
    color: #0056b3;  /* 悬停时的颜色 */
}

/* 容器样式 */
.container {
    max-width: 480px;  /* 最大宽度 */
    margin: 40px auto;  /* 外边距 */
    padding: 0;  /* 内边距 */
    background-color: #fff;  /* 背景颜色 */
    border-radius: 10px;  /* 边框圆角 */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);  /* 盒阴影 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 头部样式 */
header {
    background-color: #fff;  /* 背景颜色 */
    height: auto;  /* 高度 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 头部横幅样式 */
header .banner {
    background-image: url('images/banner.jpg?version=20231009001');  /* 背景图片 */
    background-size: cover;  /* 背景尺寸 */
    background-position: center;  /* 背景位置 */
    width: 100%;  /* 宽度 */
    height: 240px;  /* 高度 */
    max-height: 240px;  /* 最大高度 */
}

/* 头像样式 */
header .avatar {
    background-image: url('images/avatar.jpg?version=20240217002');  /* 背景图片 */
    background-size: cover;  /* 背景尺寸 */
    background-position: center;  /* 背景位置 */
    width: 140px;  /* 宽度 */
    height: 140px;  /* 高度 */
    border: 3px solid white;  /* 边框 */
    border-radius: 50%;  /* 边框圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);  /* 盒阴影 */
    position: absolute;  /* 绝对定位 */
    top: 205px;  /* 上边距 */
    left: 50%;  /* 左边距 */
    transform: translateX(-50%);  /* 水平居中 */
}

/* 头部内容样式 */
.header-content {
    margin: 0 10px 10px 10px;  /* 外边距 */
    padding-top: 80px;  /* 上内边距 */
}

/* 姓名样式 */
.header-content h3 {
    margin-bottom: 10px;  /* 保持或调整底边距，如果需要 */
}

/* 简介样式 */
.header-content .bio {
    font-size: 1rem;  /* 字体大小 */
}

/* 主内容区域样式 */
main.content {
    margin: 10px;  /* 外边距 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 按钮矩阵样式 */
main.content nav.btn-matrix {
    display: grid;  /* 使用网格布局 */
    grid-template-columns: repeat(3, 1fr);  /* 三列，每列占相同的空间 */
    gap: 5px;  /* 设置行和列之间的间隙为2像素 */
    margin: 0;  /* 修改外边距为0，确保矩阵两端与内容对齐 */
}

main.content nav.btn-matrix .btn {
    display: flex;  /* 弹性布局 */
    align-items: center;  /* 垂直居中 */
    text-align: left;  /* 文本左对齐 */
    font-size: 0.875rem;  /* 字体大小 */
    border: none;  /* 移除边框 */
    border-radius: 5px;  /* 边框圆角 */
    width: 100%;  /* 宽度 */
    color: #fff;  /* 文本颜色 */
    background-color: #333;  /* 背景颜色 */
    transition: background-color 0.2s ease-in-out;  /* 背景颜色过渡效果 */
    padding: 10px;  /* 内边距 */
}

/* 按钮图像样式 */
main.content nav.btn-matrix .btn img {
    width: 18px;  /* 宽度 */
    margin-right: 5px;  /* 右外边距 */
}

/* 按钮悬停样式 */
main.content nav.btn-matrix .btn:hover {
    background-color: #ccc;  /* 背景颜色 */
    color: #000;  /* 文本颜色 */
}

/* 按钮图标样式 */
main.content nav.btn-matrix .btn i {
    font-size: 1.2rem;  /* 字体大小 */
    margin-right: 5px;  /* 右外边距 */
}

/* 微博按钮样式 */
main.content nav.btn-matrix .weibo {
    background-color: #fd8224;  /* 背景颜色 */
}

/* 小红书按钮样式 */
main.content nav.btn-matrix .xiaohongshu {
    background-color: #f1131f;  /* 背景颜色 */
}

/* 小红书按钮悬停样式 */
main.content nav.btn-matrix .xiaohongshu:hover img {
    content: url('images/icon_xiaohongshu_dark.png');  /* 图标 */
}

/* 公众号按钮样式 */
main.content nav.btn-matrix .wechat {
    background-color: #16a040;  /* 背景颜色 */
}

/* 知乎按钮样式 */
main.content nav.btn-matrix .zhihu {
    background-color: #3670ee;  /* 背景颜色 */
}

/* B站按钮样式 */
main.content nav.btn-matrix .bilibili {
    background-color: #ea7a99;  /* 背景颜色 */
}

/* 抖音按钮样式 */
main.content nav.btn-matrix .douyin {
    background-color: #ea445a;  /* 背景颜色 */
}

/* 模态对话框样式 */
.modal-dialog {
    max-width: 280px;  /* 最大宽度 */
    margin: 0 auto;  /* 居中 */
}

/* 页脚样式 */
footer {
    font-size: 0.75rem;  /* 字体大小 */
    color: #777;  /* 文本颜色 */
    padding: 10px;  /* 内边距 */
    display: flex;  /* 弹性布局 */
    flex-direction: column;  /* 列方向 */
    align-items: center;  /* 垂直居中 */
}

/* 版权样式 */
.copyright {
    margin-bottom: 5px;  /* 下外边距 */
}

/* 联系按钮组样式 */
.contact-buttons {
    display: flex;  /* 弹性布局 */
    justify-content: center;  /* 水平居中 */
    gap: 5px;  /* 间隙 */
}

/* 联系按钮样式 */
.contact-button {
    padding: 2px 8px;  /* 内边距 */
    border-radius: 20px;  /* 边框圆角 */
    text-decoration: none;  /* 移除文本装饰 */
    font-size: 0.75rem;  /* 字体大小 */
    border: none;  /* 移除边框 */
    background-color: #e0e0e0;  /* 背景颜色 */
    color: #555;  /* 文本颜色 */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;  /* 过渡效果 */
}

/* 图标与文本间距 */
.contact-button i {
    margin-right: 2px;  /* 右外边距 */
}

/* 电话按钮悬停样式 */
.contact-button.phone:hover {
    background-color: #333;  /* 背景颜色 */
    color: #fff;  /* 文本颜色 */
}

/* 电子邮件按钮悬停样式 */
.contact-button.email:hover {
    background-color: #333;  /* 背景颜色 */
    color: #fff;  /* 文本颜色 */
}

/* 小屏幕样式 */
@media (max-width: 480px) {
    body {
        background-image: none;  /* 移除背景图片 */
    }
    .container {
        width: 100%;  /* 宽度 */
        margin: 0;  /* 外边距 */
        border-radius: 0;  /* 移除边框圆角 */
        box-shadow: none;  /* 移除盒阴影 */
    }
    header .banner {
        height: 160px;  /* 高度 */
        max-height: 120px;  /* 最大高度 */
    }

    header .avatar {
        top: 25px;  /* 上边距 */
    }
    .header-content {
        padding-top: 60px;  /* 上内边距 */
    }
}

/* 中等屏幕样式 */
@media (max-width: 768px) {
    .content h1 {
        font-size: 1.25rem;  /* 字体大小 */
    }
}