: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%);
}

/* 页脚与头图透明 */
#footer {
    background: transparent !important;
  }
  #page-header {
    background: transparent !important;
  }
  
  /* 白天模式遮罩透明 */
  #footer::before {
    background: transparent !important;
  }
  #page-header::before {
    background: transparent !important;
  }
  
  /* 夜间模式遮罩透明 */
  [data-theme="dark"] #footer::before {
    background: transparent !important;
  }
  [data-theme="dark"] #page-header::before {
    background: transparent !important;
  }

  /* 小冰分类分类磁铁黑夜模式适配 */
  /* 一般状态 */
  [data-theme="dark"] .magnet_link_context {
      background: #1e1e1e;
      color: antiquewhite;
  }

  /* 鼠标悬浮状态 */
  [data-theme="dark"] .magnet_link_context:hover {
      background: #3ecdf1;
      color: #f2f2f2;
  }

  /* 翻页按钮居中 */
  #pagination {
    width: 100%;
    margin: auto;
   }

     /* 日间模式不生效 */
     [data-theme="light"] #site-name,
     [data-theme="light"] #site-title,
     [data-theme="light"] #site-subtitle,
     [data-theme="light"] #post-info {
       animation: none;
     }
  
     /* 夜间模式生效 */
     [data-theme="dark"] #site-name,
     [data-theme="dark"] #site-title {
       animation: light_15px 10s linear infinite;
     }
  
     [data-theme="dark"] #site-subtitle {
       animation: light_10px 10s linear infinite;
     }
  
     [data-theme="dark"] #post-info {
       animation: light_5px 10s linear infinite;
     }
  
     /* 关键帧描述 */
     @keyframes light_15px {
       0% {
         text-shadow: #5636ed 0 0 15px;
       }
  
       12.5% {
         text-shadow: #11ee5e 0 0 15px;
       }
  
       25% {
         text-shadow: #f14747 0 0 15px;
       }
  
       37.5% {
         text-shadow: #f1a247 0 0 15px;
       }
  
       50% {
         text-shadow: #f1ee47 0 0 15px;
       }
  
       50% {
         text-shadow: #b347f1 0 0 15px;
       }
  
       62.5% {
         text-shadow: #002afa 0 0 15px;
       }
  
       75% {
         text-shadow: #ed709b 0 0 15px;
       }
  
       87.5% {
         text-shadow: #39c5bb 0 0 15px;
       }
  
       100% {
         text-shadow: #5636ed 0 0 15px;
       }
     }
  
     @keyframes light_10px {
       0% {
         text-shadow: #5636ed 0 0 10px;
       }
  
       12.5% {
         text-shadow: #11ee5e 0 0 10px;
       }
  
       25% {
         text-shadow: #f14747 0 0 10px;
       }
  
       37.5% {
         text-shadow: #f1a247 0 0 10px;
       }
  
       50% {
         text-shadow: #f1ee47 0 0 10px;
       }
  
       50% {
         text-shadow: #b347f1 0 0 10px;
       }
  
       62.5% {
         text-shadow: #002afa 0 0 10px;
       }
  
       75% {
         text-shadow: #ed709b 0 0 10px;
       }
  
       87.5% {
         text-shadow: #39c5bb 0 0 10px;
       }
  
       100% {
         text-shadow: #5636ed 0 0 10px;
       }
     }
  
     @keyframes light_5px {
       0% {
         text-shadow: #5636ed 0 0 5px;
       }
  
       12.5% {
         text-shadow: #11ee5e 0 0 5px;
       }
  
       25% {
         text-shadow: #f14747 0 0 5px;
       }
  
       37.5% {
         text-shadow: #f1a247 0 0 15px;
       }
  
       50% {
         text-shadow: #f1ee47 0 0 5px;
       }
  
       50% {
         text-shadow: #b347f1 0 0 5px;
       }
  
       62.5% {
         text-shadow: #002afa 0 0 5px;
       }
  
       75% {
         text-shadow: #ed709b 0 0 5px;
       }
  
       87.5% {
         text-shadow: #39c5bb 0 0 5px;
       }
  
       100% {
         text-shadow: #5636ed 0 0 5px;
       }
     }

         /* 侧边栏个人信息卡片动态渐变色 */
         #aside-content>.card-widget.card-info {
           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%;
           }
         }
    
         /* 黑夜模式适配 */
         [data-theme="dark"] #aside-content>.card-widget.card-info {
           background: #191919ee;
         }
    
         /* 个人信息Follow me按钮 */
         #aside-content>.card-widget.card-info>#card-info-btn {
           background-color: #3eb8be;
           border-radius: 8px;
         }

/* 首页文章卡片 */
#recent-posts>.recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[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(158, 204, 171, 0.5) !important;
}

.read-mode div#post {
  background: rgba(158, 204, 171, 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;
}

/* Twikoo 评论样式 */

.tk-input .el-textarea__inner {
  min-height: 120px !important;
}

#twikoo .OwO-body {
  max-width: 100% !important;
}

#twikoo .OwO .OwO-body .OwO-items:nth-child(1),
#twikoo .OwO .OwO-body .OwO-items:nth-child(4) {
  max-height: 360px !important;
}

#twikoo .OwO-items li[title|=menhera] img {
  width: 100% !important;
  margin: 5px 10px;
}

.tk-comment .tk-owo-emotion[alt*=menhera] {
  width: 300px !important;
}

.tk-comment .vemoji[alt|=menhera],
.tk-comment .tk-owo-emotion[alt*=menhera] {
  max-width: 300px !important;
  max-height: 300px !important;
  margin: 8px 1px;
  display: block !important;
}

@media screen and (max-width: 768px) {

  .tk-comment .vemoji[alt|=menhera],
  .tk-comment .tk-owo-emotion[alt*=menhera] {
    max-width: calc(100% - 30px) !important;
    max-height: calc(100% - 30px) !important;
  }

  .OwO .OwO-body .OwO-items-image .OwO-item[title*=menhera] {
    max-width: calc(50% - 10px);
    box-sizing: border-box;
  }

}