/*  主要内容显示区域 */


/*  左侧边导航 level-1-content ml-4 mt-1 overflow-hidden max-h-0 transition-height */

.mb-1 span {
    font-size: 100%; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
}
.level-1-content a {
   font-size: 80%; /* 字体大小 */
   font-weight: bold; /* 字体加粗 */

}

/* 一级目录折叠、二级目标底色问题 */
/* 一级目录内容：折叠状态（默认） */
.level-1-content {
  max-height: 0;          /* 初始高度为0，隐藏内容 */
  overflow: hidden;       /* 溢出隐藏 */
  transition: max-height 0.3s ease-in-out; /* 高度过渡动画 */
}
/* 一级目录内容：展开状态（添加active类时） */
.level-1-content.active {
  max-height: 100%; /* 足够容纳二级链接的高度，可根据实际调整 */
}
/* 二级链接：默认 hover 样式 */
.level-2-nav {
  transition: background-color 0.2s ease;
}
/* 二级链接：活跃状态（添加active类时） */
.level-2-nav.active {
  background-color: #DDDDDD; /* 蓝色背景（可根据设计调整色值） */
}
/* 一级目录按钮：箭头旋转（可选，增强交互） */
.level-1-nav i.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

/*  请开发者喝杯咖啡 */
#coffee-link {
  position: fixed;   /* 固定定位，脱离文档流 */
  bottom: 20px;      /* 距离底部20px */
  right: 10px;       /* 距离右侧10px */
  z-index: 100;      /* 确保在所有内容上层 */
  font-size: 13px; /* 字体大小 */
}

#coffee-link img {
  /*border-radius: 8px;            图片圆角 */
  margin-bottom: 4px;
  margin-left: 20px;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影增强层次 */
  transition: transform 0.2s ease; /*  hover 缩放动画 */
}


#coffee-link img:hover {
  transform: scale(1.2); /*  hover 时轻微放大 */
}

/*  页脚footer */
footer .container {
    display: flex;
    align-items: center;
    margin-left: 500px;
    font-size: 15px; /* 恢复字体大小 */
}

footer .container a {
    color: red;
    font-style: italic;  /* 字体倾斜 */
    text-decoration: underline; /* 添加下划线 */
}

footer .beian {
    display: flex;
    align-items: center;
    margin-left: 600px;
    margin-top: 10px;
    font-size: 13px; /* 恢复字体大小 */
    word-spacing: 1em;

}

/* 单击放大图片设置 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; /* 确保层级最高 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 灰色半透明背景 */
}

/* 模态框内的图片 */
/* 模态框内的图片：居中显示，限制最大宽高 */
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

/* 关闭按钮：右上角，样式美化 */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: #bbb; /*  hover时变浅 */
}

/* 为图片添加悬停效果，提示可点击 */
.myImg {
    cursor: pointer;
    transition: transform 0.2s;
    margin: 10px 0;
}
/* 鼠标悬停时，放大1.07 */
.myImg:hover {
    transform: scale(1.07);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}