styles.css

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    min-height: 100%; /* 确保至少有100%的高度 */
}

body {
    font-family: '宋体', sans-serif; /* 使用宋体字体 */
    position: relative; /* 确保z-index生效 */
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 背景图片位于下层 */
    background-image: url('assets/a.png');
    background-size: cover; 
    background-position: center; /* 确保背景图片居中显示 */
}

#countdown, #greetings, #previewButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中显示 */
    z-index: 2; /* 确保这些元素在canvas之上 */
    text-align: center; /* 文字居中 */
    color: #fff; /* 文字颜色设置为白色 */
    font-size: 36px; /* 调整字体大小确保可见 */
    margin: 0; /* 移除默认的边距 */
}

#fireworksCanvas {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* 允许鼠标事件穿透canvas */
}

#header {
    position: absolute;
    top: 10px; /* 调整到顶部 */
    right: 10px; /* 调整到最右边 */
    color: #fff; /* 文字颜色设置为白色 */
    z-index: 2; /* 确保这些元素在canvas之上 */
}

#footer {
    position: absolute;
    bottom: 10px; /* 调整到底部 */
    left: 10px; /* 调整到最左边 */
    color: #fff; /* 文字颜色设置为白色 */
    z-index: 2; /* 确保这些元素在canvas之上 */
}

#footer a {
    color: white;
    text-decoration: none; /* 如果需要去除下划线的话 */
}


/* 媒体查询：适应不同设备 */
@media only screen and (max-width: 600px) {
    #countdown, #greetings {
        font-size: 24px; /* 在小屏幕上调整字体大小 */
    }
}