:root {
    /* 定义CSS变量 */
    --main-bg-color: #f9f9f9;  /* 主背景色 */
    --border-color: #ddd;  /* 边框颜色 */
    --text-color: #333;  /* 文字颜色 */
    --highlight-color: #38b6ff;  /* 高亮颜色 */
    --paragraph-bg-color: #fff;  /* 段落背景色 */
    --shadow-color: rgba(0, 0, 0, 0.1);  /* 阴影颜色 */
    --font-family: 'Arial', sans-serif;  /* 字体 */
    --font-size: 16px;  /* 字体大小 */
    --container-width: 96%;  /* 容器宽度 */
    --container-margin: 15px auto;  /* 容器外边距 */
    --container-padding: 10px;  /* 容器内边距 */
    --paragraph-margin: 8px 0;  /* 段落外边距 */
    --paragraph-padding: 5px 10px;  /* 段落内边距 */
    --border-radius: 5px;  /* 边框圆角半径 */
    --paragraph-border-radius: 3px;  /* 段落边框圆角半径 */
    --highlight-width: 4px;  /* 高亮宽度 */
    --animation-duration: 0.3s;  /* 动画持续时间 */
    --animation-timing-function: ease-in-out;  /* 动画时间函数 */
    --icon-color: #38b6ff;  /* 图标颜色 */
    --hover-bg-color: #f0f8ff;  /* 悬停背景色 */
    --gradient-start-color: #38b6ff;  /* 渐变起始颜色 */
    --gradient-end-color: #4acaff;  /* 渐变结束颜色 */
}
#riqixinxi-info {
    /* 设置元素的样式 */
    width: var(--container-width);  /* 使用变量定义的宽度 */
    margin: var(--container-margin);  /* 使用变量定义的外边距 */
    padding: var(--container-padding);  /* 使用变量定义的内边距 */
    border: 1px solid var(--border-color);  /* 边框颜色和宽度 */
    border-radius: var(--border-radius);  /* 使用变量定义的边框圆角半径 */
    background: linear-gradient(135deg, var(--main-bg-color), #e9e9e9);  /* 背景渐变 */
    box-shadow: 0 0 10px var(--shadow-color);  /* 盒子阴影 */
    transition: transform var(--animation-duration) var(--animation-timing-function), box-shadow var(--animation-duration) var(--animation-timing-function);  /* 动画效果 */
    white-space: normal;  /* 允许内容换行 */
}
#riqixinxi-info strong {
    white-space: nowrap;  /* 强标签内容不换行 */
}
#riqixinxi-info:hover {
    transform: translateY(-5px);  /* 悬停时向上移动 */
    box-shadow: 0 0 20px var(--shadow-color);  /* 悬停时增加阴影 */
}
#riqixinxi-info p {
    display: flex;  /* 使用弹性盒布局 */
    align-items: center;  /* 垂直居中对齐 */
    text-align: left;  /* 左对齐 */
    font-family: var(--font-family);  /* 使用变量定义的字体 */
    font-size: var(--font-size);  /* 使用变量定义的字体大小 */
    color: var(--text-color);  /* 使用变量定义的文字颜色 */
    margin: var(--paragraph-margin);  /* 使用变量定义的内边距 */
    padding: var(--paragraph-padding);  /* 使用变量定义的内边距 */
    background-color: var(--paragraph-bg-color);  /* 使用变量定义的段落背景色 */
    border-left: var(--highlight-width) solid var(--highlight-color);  /* 高亮左边框 */
    border-radius: var(--paragraph-border-radius);  /* 使用变量定义的段落边框圆角半径 */
    position: relative;  /* 相对定位 */
    transition: background-color var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);  /* 动画效果 */
    overflow: hidden;  /* 隐藏溢出内容 */
}
#riqixinxi-info p:hover {
    background-color: var(--hover-bg-color);  /* 悬停时背景颜色 */
    transform: scale(1.02);  /* 悬停时缩放 */
}
#riqixinxi-info p:first-of-type {
    margin-top: 0;  /* 第一个段落的顶部不留空隙 */
}
#riqixinxi-info p:last-of-type {
    margin-bottom: 0;  /* 最后一个段落的底部不留空隙 */
}
#riqixinxi-info p::before {
    content: "";  /* 插入一个空内容 */
    margin-right: 10px;  /* 右边距 */
    font-size: 18px;  /* 字体大小 */
    color: var(--icon-color);  /* 使用变量定义的图标颜色 */
}
#riqixinxi-info p::after {
    content: '';  /* 插入一个空内容 */
    position: absolute;  /* 绝对定位 */
    left: 0;  /* 左对齐 */
    top: 0;  /* 顶部对齐 */
    height: 100%;  /* 全高 */
    width: var(--highlight-width);  /* 高亮宽度 */
    background: linear-gradient(to bottom, var(--gradient-start-color) 0%, var(--gradient-end-color) 50%, var(--gradient-start-color) 100%);  /* 渐变背景 */
    animation: gradient-border var(--animation-duration) var(--animation-timing-function) infinite;  /* 动画效果 */
}
@keyframes gradient-border {
    0% {
        background-position: 0% 0%;  /* 动画起点 */
    }
    100% {
        background-position: 0% 100%;  /* 动画终点 */
    }
}
/* 添加响应式设计，适配不同设备 */
@media (max-width: 768px) {
    :root {
        --font-size: 14px;  /* 字体大小 */
        --container-padding: 8px;  /* 容器内边距 */
        --paragraph-padding: 4px 8px;  /* 段落内边距 */
    }
    #riqixinxi-info {
        box-shadow: 0 0 5px var(--shadow-color);  /* 阴影大小 */
    }
    #riqixinxi-info p {
        padding: var(--paragraph-padding);  /* 段落内边距 */
    }
}
/* 添加悬停时的光晕效果 */
#riqixinxi-info p:hover::before {
    animation: glow 1.5s infinite alternate;  /* 动画效果 */
}
@keyframes glow {
    from {
        text-shadow: 0 0 5px var(--icon-color), 0 0 10px var(--icon-color), 0 0 15px var(--icon-color);  /* 光晕效果起点 */
    }
    to {
        text-shadow: 0 0 10px var(--icon-color), 0 0 20px var(--icon-color), 0 0 30px var(--icon-color);  /* 光晕效果终点 */
    }
}
/* 添加时辰干支效果 */
#ganzhi-shichenganzhi {
    display: flex;  /* 使用弹性盒布局 */
    flex-direction: column;  /* 竖直方向布局 */
    align-items: flex-start;  /* 左侧对齐 */
}
.ganzhi-row {
    width: 94%;  /* 设置宽度 */
    text-align: left;  /* 左对齐 */
    margin: 5px 0;  /* 外边距 */
}