/* Dark.css */

/* 暗黑主题下的body背景样式 */
html.dark-theme body {
 /* background-image: url(/images/heibeijing.png); */
    background-image: none;
    background-color: #1a1a2f;
    background-attachment: fixed; /* 背景固定 */
    color: #a9a9b3; /* 文字颜色为浅灰色 */
    transition: color 0.2s ease, border-color 0.2s ease, background 0s ease, opacity 0.2s ease; /* 添加颜色、边框、背景和透明度的过渡效果 */
}

/* 暗黑主题下的链接样式 */
.dark-theme a {
    color: #a9a9b3; /* 链接颜色为浅灰色 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.2s ease, border-color 0.2s ease, background 0s ease, opacity 0.2s ease; /* 添加颜色、边框、背景和透明度的过渡效果 */
}

/* 暗黑主题下的链接悬停样式 */
.dark-theme a:hover {
    color: #28df99; /* 链接悬停颜色为绿色 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.2s ease, border-color 0.2s ease, background 0s ease, opacity 0.2s ease; /* 添加颜色、边框、背景和透明度的过渡效果 */
}



/* 暗黑主题下的星星动画样式 */
.dark-theme .stars {
    z-index: -1; /* 设置z-index为-1 */
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左对齐 */
    width: 100%; /* 宽度为100% */
    height: 0px; /* 高度为0px */
    transform: rotate(-35deg); /* 旋转-35度 */
}

/* 暗黑主题下的星星样式 */
.dark-theme .star {
    --star-color: #ff7f40; /* 星星颜色为橙色 */
    --star-tail-length: 6em; /* 星星尾巴长度为6em */
    --star-tail-height: 2px; /* 星星尾巴高度为2px */
    --star-width: calc(var(--star-tail-length) / 6); /* 星星宽度为尾巴长度的1/6 */
    --fall-duration: 9s; /* 下落动画持续时间为9秒 */
    --tail-fade-duration: var(--fall-duration); /* 尾巴淡出动画持续时间与下落动画相同 */
    position: absolute; /* 绝对定位 */
    top: var(--top-offset); /* 顶部偏移量 */
    left: 0; /* 左对齐 */
    width: var(--star-tail-length); /* 宽度为星星尾巴长度 */
    height: var(--star-tail-height); /* 高度为星星尾巴高度 */
    color: #d0ff4059; /* 星星颜色为浅绿色 */
    background: linear-gradient(45deg, currentColor, transparent); /* 背景为45度渐变色 */
    border-radius: 50%; /* 边框半径为50% */
    filter: drop-shadow(0 0 6px currentColor); /* 添加阴影效果 */
    transform: translate3d(150em, 0, 0); /* 初始位置偏移 */
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite, /* 下落动画 */
        tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite; /* 尾巴淡出动画 */
}

/* 手机端星星动画调整 */
@media screen and (max-width: 750px) {
    .dark-theme .star {
        animation: fall var(--fall-duration) var(--fall-delay) linear infinite; /* 只保留下落动画 */
    }
}

/* 暗黑主题下的星星1样式 */
.dark-theme .star:nth-child(1) {
    --star-tail-length: 6.07em; /* 星星1尾巴长度为6.07em */
    --top-offset: 18.71vh; /* 星星1顶部偏移量为18.71vh */
    --fall-duration: 6.295s; /* 星星1下落动画持续时间为6.295秒 */
    --fall-delay: 8.613s; /* 星星1下落动画延迟为8.613秒 */
}

/* 暗黑主题下的星星2样式 */
.dark-theme .star:nth-child(2) {
    --star-tail-length: 5.87em; /* 星星2尾巴长度为5.87em */
    --top-offset: 91.61vh; /* 星星2顶部偏移量为91.61vh */
    --fall-duration: 6.744s; /* 星星2下落动画持续时间为6.744秒 */
    --fall-delay: 5.299s; /* 星星2下落动画延迟为5.299秒 */
}

/* 暗黑主题下的星星3样式 */
.dark-theme .star:nth-child(3) {
    --star-tail-length: 7.01em; /* 星星3尾巴长度为7.01em */
    --top-offset: 66.77vh; /* 星星3顶部偏移量为66.77vh */
    --fall-duration: 7.356s; /* 星星3下落动画持续时间为7.356秒 */
    --fall-delay: 8.793s; /* 星星3下落动画延迟为8.793秒 */
}

/* 暗黑主题下的星星4样式 */
.dark-theme .star:nth-child(4) {
    --star-tail-length: 5.54em; /* 星星4尾巴长度为5.54em */
    --top-offset: 3.44vh; /* 星星4顶部偏移量为3.44vh */
    --fall-duration: 11.193s; /* 星星4下落动画持续时间为11.193秒 */
    --fall-delay: 7.602s; /* 星星4下落动画延迟为7.602秒 */
}

/* 暗黑主题下的星星5样式 */
.dark-theme .star:nth-child(5) {
    --star-tail-length: 7.37em; /* 星星5尾巴长度为7.37em */
    --top-offset: 30.74vh; /* 星星5顶部偏移量为30.74vh */
    --fall-duration: 7.323s; /* 星星5下落动画持续时间为7.323秒 */
    --fall-delay: 5.879s; /* 星星5下落动画延迟为5.879秒 */
}

/* 暗黑主题下的星星6样式 */
.dark-theme .star:nth-child(6) {
    --star-tail-length: 5.74em; /* 星星6尾巴长度为5.74em */
    --top-offset: 96.44vh; /* 星星6顶部偏移量为96.44vh */
    --fall-duration: 6.375s; /* 星星6下落动画持续时间为6.375秒 */
    --fall-delay: 6.784s; /* 星星6下落动画延迟为6.784秒 */
}

/* 暗黑主题下的星星7样式 */
.dark-theme .star:nth-child(7) {
    --star-tail-length: 6.75em; /* 星星7尾巴长度为6.75em */
    --top-offset: 53.58vh; /* 星星7顶部偏移量为53.58vh */
    --fall-duration: 11.154s; /* 星星7下落动画持续时间为11.154秒 */
    --fall-delay: 2.304s; /* 星星7下落动画延迟为2.304秒 */
}

/* 暗黑主题下的星星8样式 */
.dark-theme .star:nth-child(8) {
    --star-tail-length: 6.93em; /* 星星8尾巴长度为6.93em */
    --top-offset: 45.4vh; /* 星星8顶部偏移量为45.4vh */
    --fall-duration: 9.916s; /* 星星8下落动画持续时间为9.916秒 */
    --fall-delay: 1.499s; /* 星星8下落动画延迟为1.499秒 */
}

/* 暗黑主题下的星星9样式 */
.dark-theme .star:nth-child(9) {
    --star-tail-length: 6.79em; /* 星星9尾巴长度为6.79em */
    --top-offset: 4.57vh; /* 星星9顶部偏移量为4.57vh */
    --fall-duration: 6.47s; /* 星星9下落动画持续时间为6.47秒 */
    --fall-delay: 3.746s; /* 星星9下落动画延迟为3.746秒 */
}

/* 暗黑主题下的星星10样式 */
.dark-theme .star:nth-child(10) {
    --star-tail-length: 7.16em; /* 星星10尾巴长度为7.16em */
    --top-offset: 87.24vh; /* 星星10顶部偏移量为87.24vh */
    --fall-duration: 10.807s; /* 星星10下落动画持续时间为10.807秒 */
    --fall-delay: 3.084s; /* 星星10下落动画延迟为3.084秒 */
}

/* 暗黑主题下的星星前后伪元素样式 */
.dark-theme .star::before,
.dark-theme .star::after {
    position: absolute; /* 绝对定位 */
    content: ""; /* 内容为空 */
    top: 0; /* 顶部对齐 */
    left: calc(var(--star-width) / -2); /* 左偏移为星星宽度的负一半 */
    width: var(--star-width); /* 宽度为星星宽度 */
    height: 100%; /* 高度为100% */
    background: linear-gradient(45deg, transparent, currentColor, transparent); /* 背景为45度渐变色 */
    border-radius: inherit; /* 继承边框半径 */
    animation: blink 2s linear infinite; /* 添加闪烁动画 */
}

/* 暗黑主题下的星星前伪元素样式 */
.dark-theme .star::before {
    transform: rotate(45deg); /* 旋转45度 */
}

/* 暗黑主题下的星星后伪元素样式 */
.dark-theme .star::after {
    transform: rotate(-45deg); /* 旋转-45度 */
}