/*顶部进度条特效*/
#percentageCounter{
    position:fixed;
    left:0; 
    top:0; 
    height:3px; 
    z-index:99999; 
    background-image: linear-gradient(to right, #09F253,#FF6666);
    border-radius:5px;
    
}
/* 顶部进度条特效结束 */

/* 设置小工具样式 */
/* 容器样式：移除边框 + 添加圆弧 + 溢出隐藏（关键） */
.widget_custom_html {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* 圆弧核心样式，数值越大圆角越明显，可自行调整 */
    border-radius: 8px !important;
    /* 必须加！否则图片会超出圆弧范围显示 */
    overflow: hidden !important;
}

.custom_html_widget {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* 圆弧核心样式，数值越大圆角越明显，可自行调整 */
    border-radius: 8px !important;
    /* 必须加！否则图片会超出圆弧范围显示 */
    overflow: hidden !important;
}


/* 修改“小工具”前的小圆颜色 */
.widget-title-mac::before {
    /* 小圆的填充颜色，替换为你想要的颜色，例如 #ff6b6b 是珊瑚红 */
    background-color: #30EBD8 !important;
    /* 如果小圆有边框，也可以修改边框颜色 */
    border-color: #30EBD8 !important;
}
.widget-title-mac::after {
    /* 小圆的填充颜色，替换为你想要的颜色，例如 #ff6b6b 是珊瑚红 */
    background-color: #09F253 !important;
    /* 如果小圆有边框，也可以修改边框颜色 */
    border-color: #09F253 !important;
}

/* 仅隐藏搜索表单中的“搜索：”标签，不影响其他元素 */
#searchform label.screen-reader-text {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
}


/* 设置小工具样式结束 */



/**首页文章悬浮效果*/
.article-item {
  overflow: visible; 
}

.article-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
}

.article-item:hover {
  transform: scale(1.05);
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 -4px 8px rgba(0, 0, 0, 0.1), 4px 0 8px rgba(0, 0, 0, 0.1), -4px 0 8px rgba(0, 0, 0, 0.1); 
}
/**首页文章悬浮效果结束*/

/*文字颜色变幻*/
.color-change{
    animation:change 10s infinite;font-weight:800; 
    
}
@keyframes change{
    0%{color:#5cb85c;}
    20%{color:#556bd8;}
    40%{color:#9F253;}
    60%{color:#e40707;}
    80%{color:#66e616;}
    100% {color:#67bd31;}
    
}
/*文字颜色变幻结束*/



/*文字抖动特效*/
.my-face {
  -webkit-animation: my-face 5s infinite ease-in-out;
          animation: my-face 5s infinite ease-in-out;
  display: inline-block;
  margin: 0 5px;
}

@-webkit-keyframes my-face {
  2%,
  24%,
  80% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  4%,
  68%,
  98% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  38%,
  6% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
            transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  8%,
  86% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
            transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  10%,
  72% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
            transform: translate(0, 2.5px) rotate(1.5deg);
  }
  12%,
  64%,
  78%,
  96% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  14%,
  54% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
            transform: translate(0, -1.5px) rotate(1.5deg);
  }
  16% {
    -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);
            transform: translate(0, -0.5px) rotate(-1.5deg);
  }
  18%,
  22% {
    -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
            transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  20%,
  36%,
  46% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  26%,
  50% {
    -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
            transform: translate(0, 0.5px) rotate(0.5deg);
  }
  28% {
    -webkit-transform: translate(0, 0.5px) rotate(1.5deg);
            transform: translate(0, 0.5px) rotate(1.5deg);
  }
  30%,
  40%,
  62%,
  76%,
  88% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  32%,
  34%,
  66% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  42% {
    -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
            transform: translate(0, 2.5px) rotate(-1.5deg);
  }
  44%,
  70% {
    -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
            transform: translate(0, 1.5px) rotate(0.5deg);
  }
  48%,
  74%,
  82% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  52%,
  56%,
  60% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  58% {
    -webkit-transform: translate(0, 0.5px) rotate(2.5deg);
            transform: translate(0, 0.5px) rotate(2.5deg);
  }
  84% {
    -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
            transform: translate(0, 1.5px) rotate(2.5deg);
  }
  90% {
    -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);
            transform: translate(0, 2.5px) rotate(-0.5deg);
  }
  92% {
    -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);
            transform: translate(0, 0.5px) rotate(-0.5deg);
  }
  94% {
    -webkit-transform: translate(0, 2.5px) rotate(0.5deg);
            transform: translate(0, 2.5px) rotate(0.5deg);
  }
  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}

@keyframes my-face {
  2%,
  24%,
  80% {
    -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
            transform: translate(0, 1.5px) rotate(1.5deg);
  }
  4%,
  68%,
  98% {
    -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
            transform: translate(0, -1.5px) rotate(-0.5deg);
  }
  38%,
  6% {
    -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
            transform: translate(0, 1.5px) rotate(-1.5deg);
  }
  8%,
  86% {
    -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
            transform: translate(0, -1.5px) rotate(-1.5deg);
  }
  10%,
  72% {
    -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
            transform: translate(0, 2.5px) rotate(1.5deg);
  }
  12%,
  64%,
  78%,
  96% {
    -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
            transform: translate(0, -0.5px) rotate(1.5deg);
  }
  14%,
  54% {
    -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
            transform: translate(0, -1.5px) rotate(1.5deg);
  }
  16% {
    -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);
            transform: translate(0, -0.5px) rotate(-1.5deg);
  }
  18%,
  22% {
    -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
            transform: translate(0, 0.5px) rotate(-1.5deg);
  }
  20%,
  36%,
  46% {
    -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
            transform: translate(0, -1.5px) rotate(2.5deg);
  }
  26%,
  50% {
    -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
            transform: translate(0, 0.5px) rotate(0.5deg);
  }
  28% {
    -webkit-transform: translate(0, 0.5px) rotate(1.5deg);
            transform: translate(0, 0.5px) rotate(1.5deg);
  }
  30%,
  40%,
  62%,
  76%,
  88% {
    -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
            transform: translate(0, -0.5px) rotate(2.5deg);
  }
  32%,
  34%,
  66% {
    -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
            transform: translate(0, 1.5px) rotate(-0.5deg);
  }
  42% {
    -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
            transform: translate(0, 2.5px) rotate(-1.5deg);
  }
  44%,
  70% {
    -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
            transform: translate(0, 1.5px) rotate(0.5deg);
  }
  48%,
  74%,
  82% {
    -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
            transform: translate(0, -0.5px) rotate(0.5deg);
  }
  52%,
  56%,
  60% {
    -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
            transform: translate(0, 2.5px) rotate(2.5deg);
  }
  58% {
    -webkit-transform: translate(0, 0.5px) rotate(2.5deg);
            transform: translate(0, 0.5px) rotate(2.5deg);
  }
  84% {
    -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
            transform: translate(0, 1.5px) rotate(2.5deg);
  }
  90% {
    -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);
            transform: translate(0, 2.5px) rotate(-0.5deg);
  }
  92% {
    -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);
            transform: translate(0, 0.5px) rotate(-0.5deg);
  }
  94% {
    -webkit-transform: translate(0, 2.5px) rotate(0.5deg);
            transform: translate(0, 2.5px) rotate(0.5deg);
  }
  0%,
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
/*文字抖动特效结束*/




/* 文章内容区所有图片水平居中 */
.single-article__content img,
.page-content img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* 可选：限制图片最大宽度，避免太宽 */
    max-width: 100% !important;
    height: auto !important;
}
/*文章图片居中结束*/

/* 调整文章正文行高和段落间距 */
.single-article__content p {
    /* 行高：推荐 1.6 - 1.8，数值越大行间距越大 */
    line-height: 2 !important;
    /* 段落之间的上下间距 */
    margin-top: 1.4em !important;
    margin-bottom: 1.4em !important;
}

/* 如果文章里还有列表、引用等其他元素，也可以统一调整 */
.single-article__content ul,
.single-article__content ol,
.single-article__content blockquote {
    margin-top: 1.4em !important;
    margin-bottom: 1.4em !important;
}

/*文章行高间距设置结束*/



/*站点时间轴*/
#timeaxis ol {
    list-style:none;
    margin-left:7px;
    padding-left:14px;
    border-left:2px solid #eee;
    font-size:16px;
}
#timeaxis b {
    font-size:14px;
    font-weight:normal;
    display:block;
    position:relative;
    margin-bottom:5px;
}
#timeaxis b::after {
    position:absolute;
    top:6px;
    left:-24px;
    content:'';
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:#fff;
    border:2px solid #ccc
}
#timeaxis li {
    list-style:none;
    margin:0 0 18px 0;
    line-height:100%;
}
#timeaxis li:hover {
    color:#09F253;
}
#timeaxis li:hover b::after {
    border-color:#30EBD8;
}
#timeaxis a {
	color:#606266;
}
#timeaxis a:hover {
	color:#09F253;
}
#timeaxis li:hover b {
    color:#30EBD8;
}
/*站点时间轴结束*/

/*右侧上下滚轮美化*/
::-webkit-scrollbar {
	width: 8px;  
	height: 5px;
}
::-webkit-scrollbar-thumb {
	background-color: #87CEEB;
	background-image: -webkit-linear-gradient(45deg, rgba(238,63,77, 1) 25%, transparent 25%, transparent 50%, rgba(238,63,77, 1) 50%, rgba(238,63,77, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	background: #f6f6f6;
}

html.darkmode ::-webkit-scrollbar-track{
	background-color:#282828;
}
/*右侧上下滚轮美化结束*/



/* 自定义动画hr样式*/
hr {
	border: 0;
	/* 清除默认边框*/
	height: 2px;
	/* 设置高度*/
	background: linear-gradient(to right, #4285f4, #34a853, #fbbc05, #ea4335);
	/* 使用渐变颜色作为背景*/
	margin: 20px 0;
	/* 设置上下边距*/
	background-size: 400% 100%;
	/* 添加背景尺寸*/
	animation: colorChange 4s linear infinite;
	/* 添加动画效果*/
}

@keyframes colorChange {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}
/* 自定义动画hr样式结束*/

/* 时钟样式开始*/
.greeting-container {
  width: 100%;
  height: 150px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  font-family: Arial, sans-serif;
}
.clock-face {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.clock-time {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
.greeting-text {
  flex: 1;
  margin-left: 20px;
}
.greeting {
  font-size: 20px;
  color: #09f253;
  font-weight: bold;
  margin-bottom: 10px;
}
.tip {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}
/* 时钟样式结束*/