#web_bg {
    background-image: url("/img/ppp.png"),
        linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35))
}

/* 侧边栏个人信息卡片动态渐变色 */
#aside-content>.card-widget {
    background: linear-gradient(-45deg,
            #e8d8b9,
            #eccec5,
            #a3e9eb,
            #bdbdf0,
            #eec1ea);
    box-shadow: 0 0 5px rgb(66, 68, 68);
    position: relative;
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite !important;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 个人信息Follow me按钮 */
#aside-content>.card-widget.card-info>#card-info-btn {
    background-color: #3eb8be;
    border-radius: 8px;
}

#aside-content>.sticky_layout>.card-widget {
    background: rgba(255, 255, 255, .8);


}

/*文章页面*/
.layout>#post {
    background: rgba(255, 255, 255, .8);
}

/*分类页面*/
.layout>#page {

    background: rgba(255, 255, 255, .6);
}

/*时间轴页面*/
.layout>#archive {
    background: rgba(255, 255, 255, .6);
}

#nav-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap; /* 可根据需求调整 */
    overflow: hidden;
}

.nav-fixed #nav {
    transform: translateY(58px) !important;
    -webkit-transform: translateY(58px) !important;
}

#nav {
    transition: none;
}

/*顶部加载进度条*/
.pace {
    pointer-events: none;
    user-select: none;
    z-index: 2;
    position: fixed;
    margin: auto;
    top: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 6rem;
    background: #eaecf2;
    overflow: hidden;
  }
  
  .pace-inactive .pace-progress {
    opacity: 0;
    transition: 0.3s ease-in;
  }
  
  .pace.pace-inactive {
    opacity: 0;
    transition: 0.3s;
    top: -8px;
  }
  
  .pace .pace-progress {
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    position: fixed;
    z-index: 2;
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: #49b1f5;
    background: linear-gradient(
      to right,
      rgb(18, 194, 233),
      rgb(196, 113, 237),
      rgb(246, 79, 89)
    );
    animation: gradient 2s ease infinite;
    background-size: 200%;
  }

#nav-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
}

/* 最新文章图标 */
.newPost-left,
.newPost-right {
    position: absolute;
    top: 0;
    color: white;
    padding: 0 15px;
    background-color: #49b1f5;
    border-radius: 0 0 10px 10px;
}

.newPost-left {
    left: 15px;
}

.newPost-right {
    right: 15px;
}

/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* 这是一条分界线 */

:root {
    --trans-light: rgba(255, 255, 255, 0.88);
    --trans-dark: rgba(25, 25, 25, 0.88);
    --border-style: 1px solid rgb(169, 169, 169);
    --backdrop-filter: blur(5px) saturate(150%);
  }
  
  /* 首页文章卡片 */
  #recent-posts > .recent-post-item {
    background: var(--trans-light);
    border-radius: 25px;
    border: var(--border-style);
  }
  
  /* 首页侧栏卡片 */
  #aside-content .card-widget {
    background: var(--trans-light);
    border-radius: 18px;
    border: var(--border-style);
  }
  
  /* 文章页、归档页、普通页面 */
  div#post,
  div#page,
  div#archive {
    background: var(--trans-light);
    border: var(--border-style);
    border-radius: 20px;
    --border-style: 2px solid rgb(82, 224, 132);
  }

  
  /* 导航栏 */
  #page-header.nav-fixed #nav {
    background: rgba(255, 255, 255, 0.88);
  }
  
  [data-theme="dark"] #page-header.nav-fixed #nav {
    background: rgba(0, 0, 0, 0.7) !important;
  }
  
  /* 夜间模式遮罩 */
  [data-theme="dark"] #recent-posts > .recent-post-item,
  [data-theme="dark"] #aside-content .card-widget,
  [data-theme="dark"] div#post,
  [data-theme="dark"] div#archive,
  [data-theme="dark"] div#page {
    background: var(--trans-dark);
  }
  
  
  /* 夜间模式页脚页头遮罩透明 */
  [data-theme="dark"] #footer::before {
    background: transparent !important;
  }
  [data-theme="dark"] #page-header::before {
    background: transparent !important;
  }
  
  /* 阅读模式 */
  .read-mode #aside-content .card-widget {
    background: rgba(118, 238, 152, 0.5) !important;
  }
  .read-mode div#post {
    background: rgba(114, 227, 146, 0.5) !important;
  }
  
  /* 夜间模式下的阅读模式 */
  [data-theme="dark"] .read-mode #aside-content .card-widget {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff;
  }
  [data-theme="dark"] .read-mode div#post {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff;
  }


#tp-weather-widget .sw-container {
  /* 使用你博客中常用的字体，也可以用 inherit */
  font-family: "PMZDCST";
  font-size: 20px;
  font-weight: 700;
  /* 渐变背景 */
  background: linear-gradient(45deg, #FF9800, #FFC107);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 额外的文字阴影，增强立体感 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}



/*shuoshuo的css*/

/*artitalk说说暗黑模式背景色和字体色*/
/*配置项https://artitalk.js.org/settings.html*/
[data-theme="dark"] #artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    background: #2c2c2c;
}
[data-theme="dark"] #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel {
    background: #2c2c2c;
}
[data-theme="dark"] #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel {
    color: rgba(255, 255, 255, 0.9);
}
#operare_artitalk .at_button, #artitalk_main .at_button {
    background-color: var(--btn-bg) !important;
    color: var(--btn-color) !important;
    border-radius: 0.5em !important;
}
#operare_artitalk .at_button, #artitalk_main .at_button:hover {
    background-color: var(--btn-hover-color) !important;
}
/*artitalk说说暗黑模式背景色和字体色 end*/