/* 1. 让内容区块彻底脱离头图覆盖 */
#board {
  margin-top: -1px !important; /* 强制取消上浮 */
  background-color: transparent !important; /* 背景透明，方便观察 */
  display: flex !important;
}

/* 2. 这里的 .container 是 Fluid 的主体容器 */
.container {
  max-width: 1200px; /* 设定一个你觉得舒服的最大宽度 */
}

/* 3. 调整导航栏高度，防止内容贴太死 */
.header-inner {
  margin-bottom: 2rem !important;
}

#sidebar{
  display: flex !important;
  flex-direction: column !important;
  max-width: 400px !important;
}

/* source/css/custom-sidebar.css */

/* 定义外层包裹器为 Flex 布局 */
.custom-layout-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px; /* 根据你的主题自行调整总宽度 */
    margin: 0 auto;    /* 居中对齐 */
    padding: 20px;
    box-sizing: border-box;
}

/* 左侧主要内容区域 (Section) */
.custom-main-section {
    flex: 1; /* 占据剩余的所有空间 */
    width: 0; /* 防止内容过宽撑破 flex 容器 */
    margin-right: 30px; /* 与右侧边栏的间距 */
}

/* 右侧侧边栏区域 (Aside) */
.custom-aside-sidebar {
    width: 300px; /* 侧边栏固定宽度 */
    flex-shrink: 0; /* 防止侧边栏被挤压 */
    position: sticky; /* 可选：让侧边栏在滚动时吸顶 */
    top: 20px;
    margin-top: 50px;
}

/* --- 自我介绍卡片的 UI 样式 --- */
.author-card {
    background-color: #CCCFFF
; 
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
    
}

.author-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.author-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
}

.author-card p {
    font-size: 0.95em;
    color: #666;
    line-height: 1.5;
}

.social-links a {
    display: inline-block;
    margin-top: 15px;
    color: #0078E7;
    text-decoration: none;
}

/* 响应式设计：在手机屏幕上改为上下布局 */
@media screen and (max-width: 768px) {
    .custom-layout-wrapper {
        flex-direction: column;
    }
    .custom-main-section {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    .custom-aside-sidebar {
        width: 100%;
        position: static; /* 取消手机端的吸顶效果 */
    }
}

 .social-link-github::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("/icon/github.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 6px;
 }

  .social-link-bilibili::before {
      content: "";
      display: inline-block;
      width: 30px;
      height: 30px;
      background-image: url("/icon/bilibili.svg");
      background-size: contain;
      background-repeat: no-repeat;
      margin-right: 6px;
  }

  .social-link-zhihu::before {
      content: "";
      display: inline-block;
      width: 30px;
      height: 30px;
      background-image: url("/icon/zhihu.svg");
      background-size: contain;
      background-repeat: no-repeat;
      margin-right: 6px;
  }

  .email-link::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;

    background-image: url("/icon/mail.svg");
    background-size: contain;
    background-repeat: no-repeat;

    margin-right: 6px;
    
}

.container.nopadding-x-md {
  background-color:#ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.shadows-into-light-regular {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}
.custom-banner {
  background-image: url("/img/star_background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 150px;
  width: 95%;
  color:white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);


}