/* 
 * Author: 景昇
 * Email: uninto@icloud.com
 * Website: https://uninto.com/
 * GItHub: https://github.com/uninto/homePage
 * 请勿删除，感谢
*/

/* 全局颜色变量定义 - 亮色主题 */
:root {
  --body-color: #ecf0f3;      /* 页面背景色 */
  --main-color: #fff;         /* 主要元素背景色 */
  --shadow-color: #e6e6eb;    /* 阴影颜色 */
  --text-color: #424242;      /* 文本颜色 */
  --other-color: #eee;        /* 其他辅助色 */
  --icon-color: invert(0%);   /* 图标颜色反转值 */
}

/* 暗色主题变量 - 当元素有theme='dark'属性时生效 */
[theme='dark'] {
  --body-color: #343434;
  --main-color: #484848;
  --shadow-color: #303030;
  --text-color: #ccc;
  --other-color: #aaa;
  --icon-color: invert(90%);
}

/* 全局样式重置与基础设置 */
* {
  margin: 0;
  padding: 0;
  border-radius: 8px;               /* 全局圆角设置 */
  box-sizing: border-box;           /* 盒模型设置为border-box */
  font-family: 'GenSenRounded';     /* 全局字体 */
  /* 过渡动画：背景色、阴影、边框变化时的动画效果 */
  transition: background-color 0.8s ease, box-shadow 0.8s ease, border 0.8s ease;
  line-height: 1.3;                 /* 行高设置 */
}

/* 链接样式 */
a {
  color: var(--text-color);         /* 使用文本颜色变量 */
  text-decoration: none;            /* 去除下划线 */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* 去除移动端点击高亮 */
  transition: all 0.3s ease;        /* 所有属性变化时的过渡效果 */
}

/* 列表样式 */
li {
  list-style: none;                 /* 去除列表默认样式 */
}

/* 页面主体样式 */
body {
  height: 100vh;                    /* 高度占满整个视口 */
  display: flex;                    /* 使用flex布局 */
  border-radius: 0;                 /* 取消body的圆角 */
  justify-content: center;          /* 水平居中 */
  align-items: center;              /* 垂直居中 */
  flex-direction: column;           /* 子元素垂直排列 */
  background-color: var(--body-color); /* 使用背景色变量 */
}

/* 导航栏样式 */
nav {
  width: 350px;                     /* 宽度固定350px */
  height: 50px;                     /* 高度50px */
  max-width: 85%;                   /* 最大宽度不超过85% */
  background-color: var(--main-color); /* 使用主色变量 */
  margin-bottom: 15px;              /* 底部外边距15px */
  box-shadow: 1px 1px 1px 1px var(--shadow-color); /* 阴影效果 */
  display: flex;                    /* flex布局 */
  justify-content: space-evenly;    /* 子元素均匀分布 */
  align-items: center;              /* 垂直居中 */
}

/* 导航栏中的链接样式 */
nav a {
  font-size: large;                 /* 字体大小 */
}

/* 导航栏中的图片样式 */
nav img {
  filter: var(--icon-color);        /* 应用图标颜色反转 */
}

/* 
  导航栏点击效果类 - 这就是导航栏点击后的样式
  当导航项被点击激活时，会添加这个类
*/
.active {
  transform: scale(1.1);            /* 缩放至1.1倍大小 */
  color: #e78e00;                   /* 颜色变为绿色 */
}

/* 主内容区域样式 */
main {
  width: 350px;                     /* 宽度350px */
  height: 440px;                    /* 高度440px */
  max-width: 85%;                   /* 最大宽度85% */
  margin-bottom: 50px;              /* 底部外边距50px */
  position: relative;               /* 相对定位，用于子元素绝对定位 */
  background-color: var(--main-color); /* 主色背景 */
  box-shadow: 1px 1px 1px 1px var(--shadow-color); /* 阴影 */
  scroll-snap-type: x mandatory;    /* 水平滚动吸附效果 */
  display: flex;                    /* flex布局 */
  overflow: auto;                   /* 超出部分可滚动 */
}

/* 隐藏主内容区域和#site元素的滚动条 */
main::-webkit-scrollbar,
#site::-webkit-scrollbar {
  display: none;
}

/* 各内容区块样式 */
section {
  width: 100%;                      /* 宽度100% */
  padding: 15px;                    /* 内边距15px */
  display: flex;                    /* flex布局 */
  flex-shrink: 0;                   /* 不缩小 */
  flex-direction: column;           /* 垂直排列 */
  align-items: center;              /* 水平居中 */
  scroll-snap-align: center;        /* 滚动时居中吸附 */
  scroll-snap-stop: always;         /* 滚动时强制停在吸附点 */
}

/* 背景图片/区域样式 */
#bg {
  width: 100%;                      /* 宽度100% */
  height: 50%;                      /* 高度50% */
  background-color: var(--body-color); /* 背景色 */
  object-fit: cover;                /* 图片自适应 */
}

/* 头像样式 */
.avatar {
  width: 90px;                      /* 宽度90px */
  border-radius: 50%;               /* 圆形头像 */
  position: absolute;               /* 绝对定位 */
  top: 42%;                         /* 顶部位置42% */
  border:2px solid#d7c8a9;          /* 添加浅棕色边框 */
  box-shadow:0 2px 10px rgba(0,0,0,0.1)
}

/* 个人信息区域样式 */
.info {
  width: 100%;                      /* 宽度100% */
  flex-grow: 1;                     /* 占满剩余空间 */
  display: flex;                    /* flex布局 */
  flex-direction: column;           /* 垂直排列 */
  justify-content: center;          /* 垂直居中 */
  align-items: center;              /* 水平居中 */
  color: var(--text-color);         /* 文本颜色 */
  margin-top: 15px;                 /* 顶部外边距15px */
  padding-top: 15px;  /* 添加微小内边距，打破margin折叠 */
  /* 或使用 border-top: 1px solid transparent; 也能达到同样效果 */
}

.signature {
    font-family: "LXGW WenKai", "STKaiti", "SimSun", sans-serif; /* 字体优先级 */
    
    font-size: 1rem; /* 字体大小，根据您的需要调整 */
    font-weight: lighter; /* 字体粗细 */
    letter-spacing: 1px; /* 可选的字符间距，让排版更舒展 */
}

/* 链接区域样式 */
#link {
  width: 100%;                      /* 宽度100% */
  display: flex;                    /* flex布局 */
  justify-content: space-between;   /* 两端对齐 */
  align-items: center;              /* 垂直居中 */
}

/* 链接区域中的图片样式 */
#link img {
  width: 30px;                      /* 宽度30px */
  filter: var(--icon-color);        /* 图标颜色反转 */
}

/* 项目项样式 */
/* 项目项样式 - 修改后支持滚动 */
.item {
  width: 100%;                      /* 宽度100% */
  height: 100%;                     /* 高度100% */
  max-height: 380px;                /* 添加最大高度限制 */
  padding: 10px;                    /* 内边距10px */
  box-shadow: inset 0 0 2px 3px var(--shadow-color); /* 内阴影 */
  color: var(--text-color);         /* 文本颜色 */
  overflow-y: auto;                 /* 添加垂直滚动 */
  scrollbar-width: thin;            /* 滚动条变细 */
  scrollbar-color: var(--other-color) transparent; /* 滚动条颜色 */
    /* 行距设置 - 数值越大行距越宽 */
  line-height: 1.8;  /* 建议值1.5-2.0之间，根据阅读舒适度调整 */
  
  /* 字间距设置 - 正数增加间距，负数减小间距 */
  letter-spacing: 0.8px;  /* 可根据需要调整像素值 */
}

/* 调整.item内段落之间的间距 */
.item p {
  margin-bottom: 16px;  /* 段落底部间距，可根据需要调整数值 */
  /* 如需顶部间距可添加：margin-top: 10px; */
}

/* 可选：移除最后一个段落的底部间距，避免多余空白 */
.item p:last-child {
  margin-bottom: 0;
}

/* 为WebKit浏览器自定义滚动条样式 */
.item::-webkit-scrollbar {
  width: 6px;                       /* 滚动条宽度 */
}

.item::-webkit-scrollbar-track {
  background: transparent;          /* 轨道透明 */
}

.item::-webkit-scrollbar-thumb {
  background-color: var(--other-color); /* 滑块颜色 */
  border-radius: 3px;               /* 滑块圆角 */
}


/* 项目区域样式 */
#project {
  height: auto;                     /* 高度自适应 */
  display: flex;                    /* flex布局 */
  justify-content: space-between;   /* 两端对齐 */
  align-items: center;              /* 垂直居中 */
  margin-top: 15px;                 /* 顶部外边距15px */
}

/* 项目区域中的图片样式 */
#project img {
  width: 25px;                      /* 宽度25px */
  margin-left: 10px;                /* 左侧外边距10px */
  filter: var(--icon-color);        /* 图标颜色反转 */
}

/* 移除站点区域的滚动条 */
#project.item {
  max-height: none;         /* 取消最大高度限制 */
  overflow-y: visible;      /* 内容自然显示，不添加滚动 */
  height: auto;             /* 高度自适应内容 */
}



/* 页脚样式 */
footer {
  width: 100%;                      /* 宽度100% */
  height: 40px;                     /* 高度40px */
  line-height: 40px;                /* 行高40px */
  border-radius: 0;                 /* 取消圆角 */
  text-align: center;               /* 文本居中 */
  background-color: var(--main-color); /* 背景色 */
  box-shadow: -1px -1px 1px var(--shadow-color); /* 阴影 */
  font-size: 13px;                  /* 字体大小13px */
  position: fixed;                  /* 固定定位 */
  bottom: 0px;                      /* 底部位置0 */
}

/* 导入自定义字体 */
@font-face {
  font-family: 'GenSenRounded';
  src: url('GenSenRounded-R.woff2'); /* 字体文件路径 */
}