/* 欢迎信息样式 */
.welcome-greeting {
    font-size: 15px;
    color: #4CAF50;
    font-weight: bold;
    margin-bottom: 15px;
    background-color: #f1f8e9;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.welcome-info {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    font-family: Arial, sans-serif;
}

.welcome-info strong {
    color: #333;
    font-weight: bold;
}


.welcome-weather {
    font-size: 14px;
}

/* 整体浮动层样式 */
#left_layer {
  position: fixed;
  top: 60px;
  right: 0;
  z-index: 999;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 220px;
}

/* 语言选择下拉框 */
#language-select {
  font-size: 14px;
  padding: 8px 12px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f4f4f4;
  color: #333;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

/* 翻译状态消息 */
#loading-message {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  color: #0073e6;
  text-align: center;
}

/* 父容器样式，确保按钮能够居中 */
#button-container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100%;             /* 使容器占满父元素高度 */
}
/* 关闭按钮样式 */
#close-button {
  display: block;
  margin-top: 20px;
  font-size: 16px;
  color: #fff;
  background-color: #ff6b6b;
  padding: 10px 20px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  border: none; /* 去除按钮默认的边框 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 关闭按钮悬浮效果 */
#close-button:hover {
  background-color: #e74c3c;
  transform: translateY(-2px); /* 按钮悬浮时微微上移 */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* 按钮悬浮时加深阴影 */
}

/* 关闭按钮点击效果 */
#close-button:active {
  transform: translateY(1px); /* 按钮点击时稍微下沉 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 点击时减轻阴影 */
}

/* 隐藏多余翻译选项 */
.translateSelectLanguage {
    display: none;
}

/* PC端隐藏目录
#toc-card {
    display: none;
}
*/
/* 针对手机端隐藏目录*/
@media (max-width: 768px) {
    .relative {
        display: none;
    }
} 

/* 雪花*/
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  will-change: transform;
  user-select: none;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  /* 确保GPU加速 */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* 轮播容器样式 */
/* 轮播容器 */
.vanblog-carousel {
  position: relative;
  top: 15px; /* 距离页面顶部15px */
  width: 100%;
  max-width: 800px; /* 最大宽度800px */
  height: 400px; /* 默认高度400px，手机上可以调整 */
  overflow: hidden;
  margin: 0 auto;
  background-color: #f0f0f0; /* 背景颜色用于调试 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 给轮播图添加阴影 */
  display:none;
}

/* 图片容器 */
.carousel-images {
  display: flex;
  transition: transform 0.5s ease;
}

/* 每张图片的样式 */
.carousel-images img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使图片不变形，填满容器 */
  border-radius: 10px; /* 使图片的边角圆润 */
}

/* 小圆点容器 */
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 圆点之间的间距 */
}

/* 每个小圆点 */
.carousel-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5); /* 默认的圆点颜色 */
  transition: background-color 0.3s ease;
  cursor: pointer;
}

/* 当前图片对应的圆点高亮 */
.carousel-dots .dot.active {
  background-color: #f39c12; /* 高亮圆点的颜色 */
}

/* 给圆点添加悬浮效果 */
.carousel-dots .dot:hover {
  background-color: #e67e22;
}

/* 响应式设计：适配小屏幕 */
@media (max-width: 768px) {
  .vanblog-carousel {
    height: 250px; /* 手机端适当减少轮播图的高度 */
  }

  .carousel-dots .dot {
    width: 8px; /* 小圆点在手机端稍微小一点 */
    height: 8px;
    gap: 8px; /* 减少圆点间的间距 */
  }

  /* 如果需要更精确控制响应式设计 */
  .carousel-images img {
    object-fit: cover; /* 保证图片适配容器 */
  }
}

/* 超小屏幕（例如小手机）调整 */
@media (max-width: 480px) {
  .vanblog-carousel {
    height: 200px; /* 更小屏幕时再减小高度 */
  }

  .carousel-dots {
    bottom: 8px; /* 小屏幕上圆点位置稍微向上 */
  }

  .carousel-dots .dot {
    width: 6px; /* 更小圆点 */
    height: 6px;
    gap: 5px; /* 更紧凑的圆点间距 */
  }
}