body {
    margin: 0;   /* 清除浏览器默认边距 */
    background: #7ebeab;    /* 页面背景色（青绿色） */
}

.red { color: #cc0000;     /* 定义红色文本类 */}
.green { color: #009900;}
.White { color: #dfdfdf;}
.black { color: #444444;}
.blue { color: #0033cc;}
.yellow { color: #FFFF00;}
.purple { color: #993399;}

#wrap {
    width: 94%;                            /* 容器固定宽度568px */
    margin: 0px auto 0;              /* 上边距100px，水平居中 */
    overflow: hidden;                   /* 清除浮动影响 */
    position: relative; /* 设置相对定位 */
}

#YMBG {
    width: 100%;                           /* 与#wrap同宽 */
    height: 560px;                        /* 固定宽度336px */
    position: absolute;                 /* 绝对定位 */
    z-index: -1;                            /* 置于底层 */
    font: 160px/180px "Arial Black";          /* 超大字体设置 */
    background: #7ebeab;            /* 浅蓝色背景 */
    color: #8FC6B5;                    /* 浅蓝色文本（与背景对比度低） */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    text-align: center;
}

.todayColor {
    background: #dfdfdf center no-repeat;
    width: 35px; /* 调整为与高度相同的值 */
    height: 35px; /* 调整为与宽度相同的值 */
    border-radius: 50%; /* 使用50%来形成正圆形 */
    display: flex; /* 使用flex布局使内容居中 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    margin: 0 auto; /* 水平居中 */
}

.calendar {
    width: 100%;                               /* 固定宽度392px */
    height: 530px;
    font: 16px Arial;
    padding: 5px;
    border: 2px solid;
    border-color: #DFDFDF #808080 #808080 #DFDFDF;      /* 立体边框效果 */
}

.calendar th {
    height: 35px;
    font-weight: normal;
    font: 16px Arial;
    background: #7ebeab;                 /* 浅蓝色背景 */
    border: 1px solid;
    border-color: #DFDFDF #808080 #808080 #DFDFDF;      /* 立体边框效果 */
}

.calendar td {
    width: 150px;                              /* 固定单元格宽度75px */
    height: 60px;                               /* 固定单元格高度50px */
    text-align: center;
    vertical-align: middle; /* 文本垂直居中 */
    padding: 2px;                              /* 固定行间隔2px */
    border: 1px solid;
    border-color: #DFDFDF #808080 #808080 #DFDFDF;     /* 同表头立体效果 */
}

.calendar td strong {
    display: block;                                /* 块级元素独占一行 */
    font: bold 24px Arial;
    line-height: 35px; /* 与圆形背景高度一致，确保垂直居中 */
}

/* 周一到周五的日期数字颜色 */
.calendar td:nth-child(2) strong, /* 周一 */
.calendar td:nth-child(3) strong, /* 周二 */
.calendar td:nth-child(4) strong, /* 周三 */
.calendar td:nth-child(5) strong, /* 周四 */
.calendar td:nth-child(6) strong { /* 周五 */
    color: #444444;                            /* 修改为灰色 */
}

/* 普通农历日期的颜色 */
.calendar td span {
    color: #666666; /* 将普通农历日期的颜色改为 #4B4B4B */
    font-size: 14px;
}

/* 覆盖节假日、传统节日、二十四节气的颜色 */
.calendar td .lunarFestival,
.calendar td .solarTerms {
    color: inherit; /* 保持原有颜色 */
}

.calendar select { /* 下拉菜单样式 */
    font: 14px Arial;
    color: #006600;
}

.calendar .title { /* 标题栏样式 */
    height: 60px;
    font: 18px Arial;
    text-shadow: 1px 1px 0 #7ebeab; 
    text-align: center;
    font-weight: bold;
    background: #028760;
    padding: 6px 0px 1px 0px; /* 内边距 */
}

.topic { /* 节日提示框 */
    width: 150px;
    border: 2px solid #DFDFDF;
    padding: 2px;
    background: #028760;     /* 深灰色背景 */
    font: 12px Verdana;
    opacity: 0.9;     /* 标准透明度 */
}

.topic .con {
    padding: 2px;
}

.gday {
    color: #FFFFFF;    /* 白色文本 */
}

.nday {
    color: #FF66CC; /* 更深的粉色 */
}

.ganzhi {
    color: #FFFF00;    /* 黄色文本 */
}

.hlyi {
    color: #0F0;
}

.hlji {
    color: #F60;
}

.jns {
    color: #dfdfdf;
}

.gzage {
    color: #FF0033;
}

.gznl {
    color: #dfdfdf;
}

.festival {
    background: #7ebeab;       /* 绿色背景 */
    padding: 3px;
}

#footer {
    text-align: center;
    margin: 1px auto;
    padding: 1px;
    font-size: 14px;
    color: #006600;
}

#footer a {
    text-decoration: none; /* 去掉下划线 */
    color: inherit; /* 继承父元素颜色 */
}

#footer a:hover {
    color: #DFDFDF; /* 鼠标悬停时文字颜色变为 #DFDFDF */
}

#controls {
    text-align: center; /* 按钮居中 */
    margin-bottom: 0px; /* 与说明部分的间距 */
    margin-TOP: 8px;
}

#controls input {
    background-color: #7ebeab; /* 与日历背景色一致 */
    border: 2px solid; /* 边框粗细与颜色 */
    border-color: #DFDFDF #808080 #808080 #DFDFDF;
    color: #006600; /* 文字颜色 */
    padding: 4px 5px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    cursor: pointer; /* 鼠标指针样式 */
    border-radius: 2px; /* 圆角 */
    margin: 0 5px; /* 按钮之间的间距 */
}

#controls input:hover {
    background-color: #028760; /* 鼠标悬停时的背景色 */
    color: #DFDFDF; /* 文字颜色 */
}

@media (max-width: 768px) {
    #wrap {
        width: 100%; /* 小屏幕下宽度占满 */
    }

    .calendar td {
        width: 100px;
        height: 50px;
    }

    #YMBG {
        font-size: 80px;
        line-height: 90px;
    }
}