/* 页脚与头图透明 */
#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;
}
/*哔哩哔哩视频适配*/
.aspect-ratio {
position: relative;
width: 90%;
height: auto;
padding-bottom: 75%;
margin: 3% auto;
text-align: center;
}
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 86%;
left: 0;
top: 0;
}
/* 鼠标样式 */
#cursor {
position: fixed;
width: 16px;
height: 16px;
/* 这里改变跟随的底色 */
background: rgb(64, 224, 205);
border-radius: 8px;
opacity: 0.25;
z-index: 10086;
pointer-events: none;
transition: 0.2s ease-in-out;
transition-property: background, opacity, transform;
}

#cursor.hidden {
opacity: 0;
}

#cursor.hover {
opacity: 0.1;
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
}

#cursor.active {
opacity: 0.5;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
}
:root {
--trans-light: rgba(225, 225, 225, 0.9);
--trans-dark: rgba(25, 25, 25, 0.9);
--border-style: 1px solid rgb(169, 169, 169);
--backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#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.9) !important;
}
.read-mode div#post {
background: rgba(158, 204, 171, 0.9) !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;
}

body{
  background:url(/img/background.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;  
}

@media only screen and (max-width: 1000px) {
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
bottom: 0;
z-index:-1;
width:100%;
height:100vh;
background:url(/img/mobilebackground.jpg) center 0 no-repeat;
background-size:cover;
}
}
div#runtime {
  width: fit-content;
  color: #fff;
  padding: 0 10px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] div#runtime {
  color: #28b4c8;
  box-shadow: 0 0 5px rgba(28, 69, 218, 0.71);
}
@font-face {
  font-family: 'Normal' ;
  src: url(/font/LXGWWenKaiGB-Medium.ttf);
  font-style: normal;
  font-weight: normal;
  font-display: block;

}
/* Gallery Styles for Butterfly Theme */

/* 页面顶部的整体介绍 */
.gallery-intro {
    text-align: center;
    margin: 30px auto;
    max-width: 800px;
    padding: 0 20px;
}

/* 画廊容器 */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 图片间距 */
    padding: 15px;
    justify-content: center;
}

/* 画廊项目（卡片） */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px; /* Butterfly 默认卡片圆角是 12px */
    box-shadow: var(--card-box-shadow); /* 使用 Butterfly 主题的阴影变量，保持风格统一 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 300px;
    height: 220px;
    cursor: pointer;
    background: var(--card-bg); /* 使用 Butterfly 的卡片背景色 */
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-hover-box-shadow); /* 使用 Butterfly 的悬停阴影 */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* 亚克力效果遮罩层 */
.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 15px 15px; /* 增高一点，效果更好 */
    color: white;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    transition: background-color 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* 亚克力效果（可选，在支持的浏览器上增强体验）*/
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .item-overlay {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.item-title {
    font-weight: bold;
    font-size: 1.1rem;
    color: #fff;
}

.item-description {
    font-size: 0.85rem;
    margin-top: 5px;
    opacity: 0.9;
    color: #fff;
}