/* CSS样式表开始 */

/* 定义表格容器的样式 */
#shichenGanzhiData {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: -12px auto; /* 顶部边距以便更好地展示 */
    padding: 10px; /* 增加内边距以便更好地展示 */
    border-collapse: separate; /* 改成 separate ，以便让单元格有圆角 */
    border-spacing: 5px; /* 减小表格间距 */
    justify-content: center; /* 确保表格居中 */
}

/* 定义单元格的样式 */
#shichenGanzhiData td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 8%; /* 定义单元格宽度为父容器的 8% */
    height: 60px; /* 固定高度 */
    border-radius: 10px; /* 增加圆角 */
    padding: 8px; /* 减小内边距 */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    background-color: #f5f5f5; /* 单一背景颜色 */
    position: relative;
    transition: background-color 0.5s ease, transform 0.5s ease;
}

/* 定义鼠标悬停时单元格的样式 */
#shichenGanzhiData td:hover {
    background-color: #fff2cc; /* 悬停时的背景颜色 */
    transform: scale(1.05);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); /* 当鼠标指向单元格时，增大阴影 */
}

/* 定义单元格内文本的样式 */
#shichenGanzhiData td div {
    font-size: 16px; /* 设置文本字体大小为16像素 */
    font-weight: normal; /* 确保文本不是粗体 */
    color: #333; /* 将文本颜色设置为深灰色, 提高可读性 */
    margin: 2px 0; /* 在div的顶部和底部设置5像素的外边距 */
    z-index: 2; /* 设置堆叠顺序，使div高于父元素，但这仅在定位元素时有效 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(220, 20, 60, 0.75); /* 添加阴影和光晕效果 */
    background-color: rgba(255, 255, 255, 0.8); /* 增加文本背景颜色，增强对比度 */
    padding: 5px; /* 添加内边距 */
    border-radius: 5px; /* 添加圆角 */
}

/* 在小屏设备上的优化 */
@media (max-width: 768px) {
    #shichenGanzhiData {
        width: 96%; /* 在小屏设备上占用更多宽度以提升可读性 */
    }
    #shichenGanzhiData td {
        font-size: 2rem; /* 在小屏幕上调整字体大小 */
        width: 8%; /* 调整单元格宽度为父容器的 8% */
        padding: 10px; /* 调整内边距 */
    }
}

/* CSS样式表结束 */