/* 通用样式 */
* {
    box-sizing: border-box; /* 设置盒模型为border-box，使元素的宽度和高度包含内边距和边框 */
    letter-spacing: 0.08rem; /* 设置字母间距为0.08rem */
    padding: 0; /* 移除所有元素的内边距 */
    margin: 0; /* 移除所有元素的外边距 */
}

/* 移除交互元素的默认样式 */
button, input[type="button"], input[type="submit"], input[type="reset"], a, a img {
    appearance: none; /* 移除浏览器默认样式 */
    outline: none; /* 移除焦点时的轮廓线 */
    box-shadow: none; /* 移除阴影效果 */
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击时的高亮效果 */
    text-decoration: none; /* 移除链接的下划线 */
}

/* 选中文本时的样式 */
::selection {
    background-color: #28df99; /* 选中文本的背景颜色 */
    color: #f9f9f9; /* 选中文本的文字颜色 */
}

/* 移除焦点和活动状态的默认样式 */
*:focus, *:active {
    outline: none; /* 移除焦点时的轮廓线 */
    box-shadow: none; /* 移除阴影效果 */
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击时的高亮效果 */
}

/* HTML和Body样式 */
html {
    min-height: 100%; /* 设置HTML的最小高度为100% */
    line-height: 1.15; /* 设置行高为1.15 */
    -webkit-text-size-adjust: 100%; /* 禁止移动端字体缩放 */
    font-family: 'Microsoft Jhenghei', Lantinghei SC, 'lanting', PingFang SC, Seguo UI, Microsoft Yahei, Arial; /* 设置默认字体 */
}

/* 自定义滚动条样式 */
html::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
    height: 8px; /* 滚动条高度 */
}

html::-webkit-scrollbar-thumb {
    width: 8px; /* 滚动条滑块的宽度 */
    height: 68px; /* 滚动条滑块的高度 */
    background-color: #a9a9b3; /* 滚动条滑块的颜色 */
    border-radius: 16px; /* 滚动条滑块的圆角 */
}

html::-webkit-scrollbar-thumb:hover {
    background-color: #a9a9b3; /* 滚动条滑块悬停时的颜色 */
}

/* Body样式 */
body {
    max-width: 70%; /* 设置Body的最大宽度 */
    padding: 0 1px; /* 设置Body的内边距 */
    font: 400 16px/1.7 PingFang SC, sans-serif; /* 设置字体样式 */
    color: #444; /* 设置默认文字颜色 */
    margin: 0 auto; /* 设置Body居中显示 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
    font-size: 11pt; /* 设置字体大小为11pt */
    line-height: 2.5em; /* 设置行高为2.5em */
    transition: color 0.2s ease, border-color 0.2s ease, background 0s ease, opacity 0.2s ease; /* 设置过渡效果 */
    /* 使用DeepSeek风格的背景颜色 */
    background: #f7f7f8; /* 浅灰色背景，类似DeepSeek */
    height: 100vh; /* 全视窗高度 */
}

/* 响应式设计 - 手机端 */
@media (max-width: 768px) {
    body {
        max-width: 98%; /* 在手机端设置Body的最大宽度为98% */
        /* 背景颜色继承自上面的设置，不需要重复定义 */
    }
    .footer {
        font-size: 12px; /* 在移动端设置页脚字体大小为12px */
        line-height: 1.5rem; /* 在移动端设置页脚行高为1.5rem */
        padding-top: 2em; /* 在移动端设置页脚顶部内边距为2em */
        margin-bottom: 45px; /* 在移动端设置页脚底部外边距为45px */
    }
    .mobile-yincang {
        display: none;
    }
}

/* 链接样式 */
a {
    text-decoration: none; /* 移除链接的下划线 */
    color: #111; /* 设置链接的默认颜色 */
    word-wrap: break-word; /* 允许长单词换行 */
    text-decoration-color: rgba(0, 0, 0, .4); /* 设置链接下划线的颜色 */
    cursor: pointer; /* 设置鼠标指针为手型 */
    transition: color 0.2s ease, border-color 0.2s ease, background 0s ease, opacity 0.2s ease; /* 设置链接的过渡效果 */
}

/* 全局链接悬停效果 */
a:hover {
    color: red; /* 设置链接悬停时的文字颜色为红色 */
    text-decoration-color: rgba(0, 0, 0, .6); /* 设置链接悬停时下划线的颜色 */
}

/* 页面布局 */
.main {
    flex: 1 0 auto; /* 设置弹性布局，元素可扩展但不可收缩，基准值为自动 */
}

.footer {
    height: 6rem; /* 设置页脚的高度为6rem */
    width: 100%; /* 设置页脚的宽度为100% */
    text-align: center; /* 设置页脚文字居中 */
    padding-top: 2em; /* 设置页脚顶部内边距为2em */
    font-size: 12px; /* 设置页脚字体大小为12px */
    margin-bottom: 65px; /* 设置页脚底部外边距为65px */
}

/* 介绍部分样式 */
.intro {
    transform: translateY(22vh); /* 设置介绍部分垂直偏移26vh */
    text-align: center; /* 设置介绍部分文字居中 */
}

/* 头像标题 */
.touxiangbiaoti img {
    width: 90px;
    height: 90px;
    object-fit: cover; /* 图片拉伸以完全填充容器 */
    border-radius: 30%;
}
.dark-theme .touxiangbiaoti img {
        width: 90px;
        height: 90px;
        border-radius:50%;
        animation: touxiangbiaotidonghua 5s ease-in-out infinite;
        transition: 0.5s;}
@keyframes touxiangbiaotidonghua {
    0%{box-shadow: 0 0 4px #f00;}
    25%{box-shadow: 0 0 5px #0f0;} 
    50%{box-shadow: 0 0 4px #00f;}
    75%{box-shadow: 0 0 5px #0f0;} 
    100%{box-shadow: 0 0 4px #f00;}
}

/* 坐标 */
.zuobiao i {
    line-height: 1.8;
    margin-right: 6px;
    vertical-align: middle;
    background-image: url(/images/zuobiao.svg);
    background-size: 100%;
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-top: -2px;
    animation: zuobiaofanzhuan 11s linear infinite;
}
@keyframes zuobiaofanzhuan {
    0%, 10% { transform: scaleX(1); }
    30%, 40% { transform: scaleX(-1); }
    50%, 90% { transform: scaleX(-1); }
    100% { transform: scaleX(1); }
}

/* 夜间模式 流星动画 */
@keyframes fall {
    to {
        transform: translate3d(-30em, 0, 0); /* 定义动画结束状态，元素在X轴上平移-30em */
    }
}