/* 基本样式设置 */
body, html {
    height: 100%; /* 设置html和body的高度为100% */
    margin: 0;
    padding: 0;
    display: flex; /* 使用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #1a1a2e;
    color: #e6e6e6;
    font-family: 'Arial', sans-serif;
    text-align: center;
    overflow-x: hidden; /* 防止水平滚动 */
}

/* 容器样式 */
.container {
    width: 90%;
    max-width: 600px;
    background-color: #16213e;
    border: 2px solid #e9d445;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 15px;
    position: relative;
    overflow: hidden; /* 防止子元素溢出 */
}
/* 标题样式 */
h1 {
    color: #e9d445; /* 柔和的粉红色 */
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px #0f3460; /* 文本阴影效果 */
}

/* 段落样式 */
p {
    color: #a6b1e1; /* 浅紫色文本 */
}


#countdownGif {
    width: 200px;  /* 调整GIF的宽度 */
    height: auto;  /* 高度自动调整以保持比例 */
}


/* 响应式设计 */
@media (max-width: 600px) {
    .container {
        width: 95%; /* 对于更小的屏幕，增加宽度 */
        padding: 10px; /* 减少内边距 */
    }

    h1 {
        font-size: 1.5em; /* 减小标题字体大小 */
    }

    #countdown {
        font-size: 1.5em; /* 减小倒计时字体大小 */
    }
}