/* 全局背景色调整为更灰暗的浅米色 */
body {
  background-color: #DCC9A9 !important; /* 米黄色背景，复古色调 */
  position: relative;
  min-height: 100vh; /* 确保背景覆盖整个页面 */
  overflow-x: hidden; /* 防止出现水平滚动条 */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;}

footer {
    position: relative;
    z-index: 2;
    background-color: transparent; /* 确保页脚内容本身背景透明 */
}

footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /* 调整渐变高度 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(220, 201, 169, 0)); /* 黑色至透明渐变 */
  pointer-events: none; /* 确保不会影响交互 */
  z-index: -1; /* 使渐变位于页脚内容下方 */
}

/*文字渐进*/
.fadeInElement {
  opacity: 0; /* 初始透明度 */
  transform: translateY(20px); /* 初始位置向下移动 */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* 动画过渡效果 */
}

.fadeInElement.in-view {
  opacity: 1; /* 进入视图后的透明度 */
  transform: translateY(0); /* 还原位置 */
}


/* 标题 h1 样式调整为深蓝色 */
h1 {
  font-weight: normal;
  font-style: normal;
  color: rgba(184, 58, 45, 0.9); /* 砖红色，透明度略高 */
  font-size: 72px;
  text-align: center;
  z-index: 3;
  position: relative;
}

/* 小标题 h2 样式：浅蓝色 */
h2 {
  text-align: center;
  margin-bottom: 60px;
  font-weight: bold;
  text-decoration-color: rgba(78, 104, 81, 0.8); /* 深灰绿色 */
  color: rgba(78, 104, 81, 0.8) !important; /* 深灰绿色标题 */
  font-size: 90px !important; 
  z-index: 3;
  position: relative;
}

h3 {
  font-weight: normal;
  font-style: normal;
  color: rgba(184, 58, 45, 0.9); /* 砖红色，透明度略高 */
  margin-bottom: 30px;
  font-size: 60px;
  z-index: 3;
  position: relative;
}

/* 容器样式 */
.container {
  padding: 20px;
  margin: 30px auto;
  max-width: 1200px;
  position: relative;
  z-index: 3;
}

/* 卡片样式 */
.card {
  background-color: rgba(220, 201, 169, 0.6) !important; /* 米色背景 */
  padding: 30px;
  border-radius: 0 8px 8px 0;
  font-size: 24px;
  color: #444444; /* 深灰色文字 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-left: 5px solid rgba(184, 58, 45, 0.5); /* 砖红色边框 */
  z-index: 3;
  position: relative;
}

/* 主要文字颜色 */
p, .card-body {
  line-height: 1.6;
  color: #333333;
  position: relative;
  z-index: 3;
}

/* 侧边导航栏样式 */
.sidenav {
  position: fixed;
  top: 50%;
  left: -160px;
  width: 180px;
  background-color: rgba(78, 104, 81, 0.4); /* 半透明灰绿色背景 */
  padding-top: 0;
  transition: left 0.5s ease;
  z-index: 1000;
  transform: translateY(-50%);
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 0 8px 8px 0;
}


/* 鼠标悬停时侧边栏展开 */
.sidenav:hover {
  left: 0;
}



/* 侧边栏链接样式：浅灰蓝色 */
.sidenav a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px;
  color: rgba(78, 104, 81, 0.7); /* 半透明灰绿色 */
  display: block;
  font-weight: bold;
  transition: color 0.3s ease;
}


/* 悬停时链接颜色改变为深蓝色 */
.sidenav a:hover {
  color: rgba(184, 58, 45, 0.8); /* 砖红色 */
}


/* 引用区样式 */
.refer {
  padding: 10px;
  background-color: rgba(220, 201, 169, 0.6); /* 米色背景 */
  border-left: 5px solid rgba(184, 58, 45, 0.5); /* 砖红色边框 */
  color: rgba(78, 104, 81, 0.7); /* 半透明灰绿色 */
  z-index: 3;
  position: relative;
}

/* 链接样式 */
a {
  color: rgba(70, 120, 160, 0.8); /* 半透明浅蓝色 */
  text-decoration: none;
}

a:hover {
  color: rgba(40, 70, 100, 0.8); /* 更深的蓝色 */
}

/* 按钮样式 */
button {
  background-color: rgba(184, 58, 45, 0.8); /* 砖红色按钮 */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  z-index: 3;
}

button:hover {
  background-color: rgba(144, 43, 33, 0.8); /* 更深的砖红色 */
}


/* 加载动画 */
#load-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease, transform 1s ease;
}

#load-img .loading-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#load-img .logo {
  width: 200px;
  height: auto;
  animation: logoBounce 1s infinite;
}

@keyframes logoBounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-20px);
  }
}

#load-img .loading-bar {
  width: 200px;
  height: 10px;
  background-color: #b6f4a3;
  margin-top: 20px;
  animation: loadingBar 1s infinite;
}

@keyframes loadingBar {
  0% {
      width: 0;
  }
  100% {
      width: 100px;
  }
}

/* 页面加载完成后的动画效果 */
body.loaded #load-img {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

/*字体*/
/* 引入 Golden_Free 字体 */
@font-face {
  font-family: 'Golden_Free';/*小标题*/
  src: url('GoldenHarvest.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 引入 titleword1 字体，确保路径正确 */
@font-face {
  font-family: 'Plante';
  src: url('Whatdo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Chunk';
  src: url('Chunkfive.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* 引入 titleword2 字体，确保路径正确 */
@font-face {
  font-family: 'Keyzha';
  src: url('BOLDFONT.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h1, h2 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加复古感 */
  font-family: 'Golden_Free', serif; /* 使用引入的复古字体 */
}

p, .card-body {
  font-family: 'Keyzha', serif; /* 使用另一款复古字体 */
}

/*胶带*/

/* 控制间隔的高度 */
.spacer {
  height: 200px; /* 设置你想要的间距高度 */
}

/* 胶带图片容器 */
/* 胶带图片容器 */
.tape-wrapper {
  position: relative; /* 让胶带容器作为绝对定位的参考点 */
}

/* 左边胶带图片样式 */
.left-tape {
width: 100px;
transform: rotate(-15deg);
position: absolute;
top: -15px;  /* 向上移动，重叠在段落上 */
left: -20px; /* 向左移动，控制胶带的水平位置 */
z-index: 2;  /* 保证胶带显示在段落上方 */
}

/* 右边胶带图片样式 */
.right-tape {
width: 100px;
transform: rotate(15deg);
position: absolute;
top: -15px;  /* 向上移动，重叠在段落上 */
right: -20px; /* 向右移动，控制胶带的水平位置 */
z-index: 2;
}




/*图片插入*/
/* 图片容器，用于控制图片的对齐和布局 */
.image-container {
  text-align: center;
  margin: 20px 0;  /* 控制图片与内容的上下间距 */
}

/* 内容图片的样式 */
.content-image {
  max-width: 100%;  /* 确保图片不会超出容器宽度 */
  height: auto;     /* 保持图片的比例 */
  border-radius: 8px;  /* 圆角处理 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */
  filter: sepia(0.2) contrast(1.2) brightness(0.9); /* 添加轻微做旧效果 */
  border: 1px solid rgba(120, 100, 80, 0.5); /* 添加旧纸边框样式 */
}