/* 设置字体 */
@font-face {
  font-family: 'PixelFont';
  src: url('assets/Fonts/HYPixel11pxU.ttf') format('truetype'); /* 加载 ttf 格式 */
  font-weight: normal;
  font-style: normal;
}

/* 设置网页的基础样式 */
body {
  margin: 0; /* 去掉网页的默认外边距 */
  padding: 0; /* 去掉网页的默认内边距 */
  font-family: 'PixelFont', sans-serif; /* 设置网页的默认字体，备用字体为 sans-serif */
  -webkit-font-smoothing: none; /* 禁用 Webkit 浏览器的字体平滑 */
  -moz-osx-font-smoothing: grayscale; /* 禁用 macOS 的字体平滑 */
  font-smooth: never; /* 通用字体平滑禁用 */
}

/* 定义 Logo 容器的样式 */
.logo-container {
  position: fixed; /* 固定在屏幕上 */
  top: 15px; /* 距离屏幕顶部 */
  left: 40px; /* 距离屏幕左侧 */
  z-index: 1000; /* 设置较高的层级，确保 Logo 在其他内容上方 */
}

/* 定义 Logo 图片的样式 */
.logo-container img {
  width: 50px; /* 设置图片宽度 */
  height: auto; /* 高度自动调整，保持图片比例 */
}

/* 文章页面全屏半透明黑色背景 */
.article-overlay {
  position: fixed; /* 固定位置，覆盖整个屏幕 */
  top: 0;
  left: 0;
  width: 100vw; /* 占满整个视口宽度 */
  height: 100vh; /* 占满整个视口高度 */
  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  z-index: -1; /* 确保背景层在内容下方 */
}

/* 确保文章容器是相对定位，为返回链接提供定位参考 */
.article-container {
  position: relative; /* 设置相对定位 */
  max-width: 60%; /* 容器宽度 */
  margin: 2% auto; /* 上下外边距，水平居中 */
  padding: 20px;
  border-radius: 10px; /* 添加圆角 */
}

/* 文章标题样式 */
.article-title {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #FFD27F;
  text-align: left;
}

/* 文章时间样式 */
.article-time {
  font-size: 0.9em;
  color: #ffffff;
  margin-bottom: 20px;
  text-decoration: none; /* 去掉下划线 */
}

/* 文章图片样式 */
.article-image img {
  width: 60%; /* 图片宽度为父容器的 60% */
  aspect-ratio: 16 / 9; /* 保持 16:9 的宽高比 */
  object-fit: cover; /* 优先显示满图片的宽度，裁剪上下部分 */
  border-radius: 10px; /* 添加圆角 */
  display: block; /* 确保图片是块级元素，避免多余间隙 */
}

/* 文章较小图片样式 */
.article-image-small img {
  width: 35%; /* 图片宽度为父容器的 35% */
  aspect-ratio: 16 / 9; /* 保持 16:9 的宽高比 */
  object-fit: cover; /* 优先显示满图片的宽度，裁剪上下部分 */
  border-radius: 10px; /* 添加圆角 */
  display: block; /* 确保图片是块级元素，避免多余间隙 */
}

/* 文章内容样式 */
.article-content p {
  font-size: 1em;
  line-height: 1.6;
  margin-top: 15px;
  margin-bottom: 15px;
  color: #ffffff;
  word-break: break-all; /* 强制长单词或字符串换行 */
}

/* 返回链接样式 */
.article-back-link {
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离文章容器顶部 */
  left: 20px; /* 距离文章容器左侧 */
  font-size: 1em;
  color: #ffffff;
  text-decoration: underline; /* 添加下划线 */
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
  z-index: 10; /* 确保返回链接在内容上方 */
}

.article-back-link:hover {
  color: #FFD27F; /* 鼠标悬停时颜色变化 */
}

/* 底部样式 */
.article-footer {
  text-align: left;
  margin-top: 50px;
  font-size: 0.9em;
  color: #ffffff;
}

/* 链接样式 */
.article-link {
  text-decoration: underline; /* 添加下划线 */
  color: inherit; /* 继承父元素颜色 */
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.article-link:hover {
  color: #FFD27F; /* 鼠标悬停时的颜色，与“返回”链接一致 */
}