@font-face{font-family:"Micro";src:url('AvalonRegular.ttf');font-display: swap;}
#show_time{font-family:"Micro";text-align:center;font-weight:bold;margin:10px;font-size:30px;color:#fff;text-shadow:1px 1px 2px #000}
#show_date{text-align:center;font-size:16px;color:#fff;font-weight:bold;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)}
#show_lunar{font-family: '楷体', '宋体', serif;text-align:center;font-size: 1.3em;color:#fff;font-weight:bold;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)}
/* 可以添加更多样式来进一步美化黄历展示 */
.almanac-header {
    font-family: '楷体', '宋体', serif; /* 使用中国书法字体 */
    font-size: 1.8em;
    color: #D32F2F; /* 中国红 */
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.almanac-content {
    /* Webkit引擎浏览器（如Chrome和Safari）的字体平滑 */
    -webkit-font-smoothing: antialiased;
    
    /* Gecko引擎浏览器（如Firefox）的字体平滑 */
    -moz-osx-font-smoothing: grayscale;
    
    /* 通用的字体平滑属性，不是所有浏览器都支持 */
    font-smooth: always;
    font-family: '楷体', '宋体', serif; /* 使用中国书法字体 */
    font-size: 1.5em;
    color: #333;
    line-height: 1.6;
    background-color: #f5f5f5; /* 添加背景色 */
    /*border: 1px solid #D32F2F; /* 添加边框 */
    border-left: 3px solid #D32F2F; /* 边框装饰 */
    padding: 20px; /* 增加内边距 */
    margin: 0 auto;
    max-width: 600px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 添加字体阴影 */
    border-radius: 10px; /* 为边框添加圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative; /* 相对定位 */
    /* 回退机制 */
    background: linear-gradient(210deg, transparent 1.5em, #edf0f2 0);
}

/* 模拟翻起的角 */
.almanac-content:before {
     content: '';
     display: block;
     width: 1.73em;
     height: 3em;
     position: absolute;
     background: linear-gradient(60deg, #edf0f2 50%, transparent 0);
     right: 0;
     top: 0;
     border-bottom-left-radius: inherit;
     transform: translateY(-1.27em) rotate(-30deg);
     transform-origin: bottom right;
     box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
 
 }

/* 可以添加更多样式来进一步美化黄历展示 */

/* 历史上的今天样式 */
/*.todayHistory{margin:0 20px;padding-bottom:10px}*/
.todayHistory ul li{display:block;line-height:32px;position:relative;margin:3px 0;counter-increment:nums;padding-left:30px;overflow:hidden;word-wrap:normal!important;/*white-space:nowrap;text-overflow:ellipsis*/}
.todayHistory ul li a{color:#787977}
.todayHistory ul li:before{color: #000;width:22px;height:22px;line-height:22px;text-align:center;content:counter(nums,decimal);position:absolute;left:0;top:5px;border-radius:100%;background-color:#edefee;text-shadow:0 1px 0 rgba(255,255,255,.5);font-family:SourceCodeProRegular,Menlo,Monaco,Consolas,"Courier New",monospace,'Helvetica Neue',Arial,sans-serif}
/*以上就是一个稍微好看的有编号的li列表 */
/*加上以下之后，排名前三的数据编号就添加了编号颜色，更好看*/
.todayHistory ul li:first-child:before,.todayHistory ul li:nth-child(2):before,.todayHistory ul li:nth-child(3):before{color:#fff;text-shadow:none}
.todayHistory ul li:first-child:before{background-color:#e24d46}  /*第1行的行号样式*/
.todayHistory ul li:nth-child(2):before{background-color:#2ea7e0} /*第2行的行号样式*/
.todayHistory ul li:nth-child(3):before{background-color:#6bc30d} /*第3行的行号样式*/
.todayHistory ul li a:hover{text-decoration:underline;color:#6bc30d}  /*鼠标移过更好看*/

/* 弹出链接模态框介绍样式 */
#modal-description {
    display: none;
    position: relative;
}

#modal-description.show-all {
    display: block;
    max-height: none; /* 显示全部内容 */
}

#modal-description-more {
    display: block;
    position: absolute;
    bottom: 5px;
    right: 20px;
    background-color: #f0f0f0;
    padding: 0 10px;
    cursor: pointer;
}