/* 引入自定义字体 */
@font-face {
    font-family: 'LXGWWenKaiGBScreen';
    src: url('../fonts/LXGWWenKaiGBScreen.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 基本样式 */
html, body {
    font-family: 'LXGWWenKaiGBScreen', sans-serif;
    overflow: hidden; /* 禁用滚动条 */
    height: 100%; /* 确保 body 高度为 100% */
    margin: 0; /* 去掉默认边距 */
    padding: 0; /* 去掉默认内边距 */
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    flex-direction: column;
    color: #000; /* 设置全局文字颜色为黑色 */
}

/* 背景渐变 Canvas */
#canvas-basic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 使用视口高度 */
    z-index: -1; /* 确保 canvas 在其他内容后面 */
    transition: opacity 0.5s ease-in-out;
    opacity: 0.7; /* 显示 Canvas 内容 */
}

/* 内容包装器样式 */
#content-wrapper {
    position: relative;
    z-index: 1; /* 确保内容在 Canvas 上方 */
    padding-bottom: 60px; /* 留出页脚空间 */
    min-height: 100vh; /* 确保包装器占据整个视口高度 */
    display: flex;
    flex-direction: column;
}

/* 页眉样式 */
header {
    text-align: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #000; /* 页眉文字颜色为黑色 */
}

/* 头像容器样式 */
.avatar-container {
    margin-top: 20px; /* 顶部间距 */
    text-align: center; /* 头像居中对齐 */
}

/* 头像样式 */
.avatar {
    width: 200px; /* 头像宽度 */
    height: 200px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 确保图片完全覆盖容器 */
    border: 3px solid rgba(255, 255, 255, 0.1); /* 半透明边框 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3) inset; /* 外部和内部阴影模拟突起效果 */
    /* 外部阴影使头像看起来从背景中突起，内部阴影增强立体感 */
    animation: rotate 20s linear infinite; /* 缓慢旋转动画 */
}

/* 头像旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 自定义文本样式 */
.custom-text {
    margin-top: 10px; /* 头像和文字之间的间距 */
    color: #000; /* 自定义文字颜色 */
    font-size: 25px; /* 默认文字大小 */
    text-align: center; /* 文本居中对齐 */
    position: relative;
}

/* 自定义横线样式 */
.line {
    margin-top: 10px; /* 文字和横线之间的间距 */
    width: 90%; /* 横线的宽度，百分比表示相对父元素 */
    height: 2px; /* 横线的中间部分的粗细 */
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0) 0%, /* 透明开始 */
        rgba(0, 0, 0, 0) 10%, /* 透明逐渐变细的部分 */
        rgba(0, 0, 0, 1) 50%, /* 中间1px的粗细 */
        rgba(0, 0, 0, 0) 90%, /* 透明逐渐变细的部分 */
        rgba(0, 0, 0, 0) 100% /* 透明结束 */
    ); 
    margin-left: auto;
    margin-right: auto;
    position: relative; /* 使横线在父元素内部居中 */
}

/* 内容区域样式 */
main {
    flex: 1; /* 内容区域占据剩余空间 */
    padding: 20px;
    display: flex;
    flex-direction: column; /* 改为垂直布局 */
    align-items: center;
    box-sizing: border-box;
}

/* 页脚样式 */
footer {
    background-color: transparent;
    color: #000; /* 设置页脚文字颜色为黑色 */
    padding: 10px 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    position: fixed; /* 固定在底部 */
    bottom: 0; /* 距底部 0px */
    left: 0;
    z-index: 1;
}

/* 导航样式 */
nav {
    display: flex;
    flex-wrap: wrap; /* 按钮换行 */
    justify-content: center; /* 居中对齐 */
    width: 100%;
    box-sizing: border-box;
}

/* 导航项样式 */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 按钮换行 */
    gap: 25px; /* 每排按钮的间距 */
    justify-content: center; /* 居中对齐 */
}

/* 每个按钮的样式 */
nav ul li {
    flex: 0 0 120px; /* 设置按钮宽度为100px */
}

/* 按钮样式 */
nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0; /* 上下内边距 */
    width: 150px; /* 设置按钮宽度为100px */
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px; /* 缩小字体 */
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.5); /* 透明背景 */
    color: #000; /* 设置按钮文字颜色为黑色 */
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 边缘效果 */
    box-sizing: border-box;
    text-align: center;
    line-height: 40px; /* 确保文字垂直居中 */
}

/* 图标样式 */
nav ul li a i {
    margin-right: 5px; /* 图标与文本之间的间距 */
    margin-left: 3%; /* 图标距离按钮左边的间距 */
}

/* 链接的悬停效果 */
nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.5); /* 更高透明度 */
    color: #4CAF50;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 增强边缘效果 */
}

/* 在暗色主题下的样式 */
body.dark nav ul li a {
    background-color: rgba(50, 50, 50, 0.2); /* 透明背景 */
    color: #000; /* 保持按钮文字颜色为黑色 */
}

body.dark nav ul li a:hover {
    background-color: rgba(80, 80, 80, 0.8); /* 更高透明度 */
    color: #4CAF50;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 增强边缘效果 */
}