@import
 url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
h1, h2, h3, .postTitle {
  font-family: 'Orbitron', sans-serif;
}
/* 全局样式 */
body {
  background: url('https://images.cnblogs.com/cnblogs_com/blogs/840897/galleries/2447750/o_250305072714_pexels-life-of-pix-7919.jpg') no-repeat center center fixed !important;
  background-size: cover !important; /* 确保铺满 */
  color: #333; /* 文字颜色保持可读 */
  font-family: 'Arial', sans-serif;
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
}
/* 避免遮挡背景的关键容器 */
#home, #main, #sideBar {
  background: transparent !important; /* 移除默认背景 */
}
/* 星空效果的容器 */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* 确保星星在背景之上但不遮挡内容 */
  pointer-events: none;
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #cce0ff; /* 浅蓝色星星 */
  border-radius: 50%;
  animation: twinkle linear infinite;
}
@keyframes
 twinkle {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}
/* 博客标题（Stellar Nexus） */
#blogTitle {
  color: #ffffff !important; /* 设置为白色 */
  font-family: 'Orbitron', sans-serif; /* 使用科技感字体 */
  text-shadow: 0 0 5px rgba(3, 3, 3, 0.3); /* 轻微阴影，提升可读性 */
  padding: 10px 40px; /* 增加右内边距，右移标题 */
  margin-left: 250px; /* 向右移动50像素 */
}
/* 导航栏 */
#navigator {
  background: rgba(255, 255, 255, 0.1) !important; /* 半透明白色 */
  border-radius: 10px;
  border-bottom: 1px solid #e0e7ff;
  width: 75%; /* 略微缩小宽度，留出边缘空间 */
  margin: 10px auto; /* 增加上下外边距，居中 */
  box-shadow: 0 2px 10px rgba(0, 0, 255, 0.1); /* 添加阴影，增强立体感 */
  padding: 0 20px; /* 导航栏左右内边距，增加边缘空间 */
  display: flex; /* 使用Flexbox排列导航项 */
  flex-direction: row; /* 恢复为横向（水平）分布 */
  justify-content: space-between; /* 导航项均匀分布，留出边缘空间 */
  align-items: center; /* 垂直居中 */
}
/* 主内容区域 */
#main {
  background: rgba(255, 255, 255, 0.5) !important; /* 半透明白色 */
  border-radius: 10px;
  padding: 20px;
  position: relative;
  z-index: 1; /* 确保内容在星星之上 */
  min-height: 100%; /* 确保与侧边栏长度一致 */
  width: 75%; /* 设置为90%宽度 */
  margin: 10px auto; /* 增加外边距，居中 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px rgba(0, 0, 255, 0.1); /* 增强阴影 */
}
.postTitle a {
  color: #4a6ee0;
  font-weight: bold;
  text-decoration: none;
}
.postTitle a:hover {
  color: #8a4af3;
}
.postBody {
  line-height: 1.8;
  color: #444;
  flex-grow: 1; /* 填充剩余空间 */
}
/* 侧边栏 */
#sideBar {
  background: rgba(255, 255, 255, 0.1) !important; /* 半透明白色 */
  border-radius: 10px; /* 圆角 */
  padding: 8px;
  position: relative;
  z-index: 1;
  width: 16%; /* 设置为16%宽度 */
  margin: 10px 0; /* 增加外边距 */
  margin-left: 1538px; /* 调整右移距离 */
}
/* 常用链接样式 */
#sidebar_quicklink ul {
  list-style: none;
  padding: 0;
}
#sidebar_quicklink a {
  color: #4a6ee0;
  text-decoration: none;
}
#sidebar_quicklink a:hover {
  color: #8a4af3;
}
/* 日历样式 */
#calendar table {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1); /* 日历背景透明 */
  border-radius: 5px;
}
#calendar th, #calendar td {
  padding: 5px;
  text-align: center;
  color: #333;
}
/* 按钮和链接 */
a:link, a:visited {
  color: #4a6ee0;
  text-decoration: none;
}
a:hover {
  color: #8a4af3;
}
/* 页脚 */
#footer {
  color: #666;
  text-align: center;
  border-radius: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1) !important; /* 半透明白色 */
  position: relative;
  z-index: 1;
  width: 75%; /* 与主内容一致 */
  margin: 10px auto; /* 居中 */
  box-shadow: 0 0 15px rgba(0, 0, 255, 0.1); /* 增强阴影 */
}
/* 确保主内容和侧边栏对齐，并调整宽度 */
#wrapper {
  display: flex;
  min-height: 100vh; /* 页面最小高度为视口高度 */
  padding: 10px; /* 增加整体内边距 */
}
#mainContent {
  flex: auto; /* 主内容区域占据更多宽度 */
  margin-right: 10px; /* 与侧边栏间距 */
}
#sideBarMain {
  width: 200px; /* 侧边栏固定宽度 */
  margin-left: 9px; /* 与主内容间距 */
}
/* 响应式设计 */
@media
 (max-width: 768px) {
  #navigator, #main, #footer {
    width: 100%; /* 小屏幕填满 */
    margin: 5px auto;
  }
  #sideBar {
    width: 100%; /* 侧边栏在小屏幕填满 */
    margin: 5px 0;
  }
  #sideBarMain {
    width: 100%; /* 侧边栏内容填满 */
    margin-left: 0;
  }
  #mainContent {
    margin-right: 0; /* 移除间距 */
  }
  #blogTitle {
    margin-left: 10px; /* 小屏幕标题少量右移 */
  }
  #navigator .nav {
    flex-direction: column; /* 小屏幕保持垂直分布 */
    align-items: flex-start;
  }
}