body {
    background-image: url('1.jpg'); /* 替换为您的背景图片地址 */
    background-repeat: no-repeat;  
    background-position: center center;  
    background-size: cover;  
    font-family: sans-serif;  
    text-align: center;  
    background-color: #f2f2f2;
}

.container {
    margin: 150px auto;
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 为h1标签添加样式 */  
.container h1 {  
    color: white;  /* 更改标题颜色 */  
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的文字阴影 */  
    font-size: 32px; /* 稍微增大字体大小 */  
    font-weight: 700; /* 使用更具体的加粗值 */  
    margin-bottom: 30px; /* 增大标题与下方内容之间的间距 */  
    text-align: center; /* 确保标题在容器中居中 */  
    /* background-color: rgba(255, 255, 255, 0.7); /* 添加半透明背景色 */  
    background-color: #4CAF50; /* 将背景色改为绿色 */
    padding: 10px 20px; /* 添加内边距 */  
    border-radius: 10px; /* 添加圆角 */  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */  
    /* 移除动画效果 */  
    /* animation: none; */  
  
    /* 可以添加一个渐变色效果，如果喜欢的话 */  
    /* background: linear-gradient(to right, #ff5733, #ff7043); */  
}  
  
/* 如果你仍然想添加动画效果，可以尝试一个更平滑的过渡效果 */  
/* @keyframes pulse {  
    0% {transform: scale(1);}  
    50% {transform: scale(1.05);}  
    100% {transform: scale(1);}  
}  
  
.container h1 {  
    animation: pulse 2s infinite;  
} */

.custom-button {  
    /* 设置按钮的宽高 */  
    width: 120px; /* 稍微加宽按钮 */  
    height: 40px; /* 稍微加高按钮 */  
  
    /* 设置按钮的背景色、边框和圆角 */  
    background-color: #4CAF50; /* 绿色背景 */  
    border: none;  
    border-radius: 5px; /* 使用较小的圆角 */  
  
    /* 设置按钮的文字样式 */  
    color: white;  
    font-size: 16px;  
    font-weight: bold;  
    line-height: 40px; /* 垂直居中文字 */  
    text-transform: uppercase; /* 全部大写 */  
  
    /* 设置按钮的鼠标悬停效果 */  
    transition: background-color 0.3s ease, transform 0.1s ease-in-out;  
    cursor: pointer;  
  
    /* 添加阴影效果 */  
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);  
  
    /* 添加内发光效果（可选） */  
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));  
  
    /* 添加渐变背景（可选） */  
    /* background: linear-gradient(to bottom, #4CAF50, #45a049); */  
  
    /* 添加文字阴影（可选） */  
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); */  
  
    /* 初始状态，无变形 */  
    transform: scale(1);  
    display: inline-block; /* 允许按钮并排显示 */  
    text-align: center; /* 确保文字在按钮中居中 */  
    padding: 0 20px; /* 添加内边距，使按钮中的文字空间更大 */  
}  
  
.custom-button:hover {  
    /* 鼠标悬停时改变背景色 */  
    background-color: #FF7F50;  
  
    /* 稍微放大按钮 */  
    transform: scale(1.05);  
  
    /* 加深阴影效果（可选） */  
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);  
}  
  
.custom-button:active {  
    /* 点击时稍微缩小按钮 */  
    transform: scale(0.98);  
  
    /* 移除阴影，增强点击感（可选） */  
    box-shadow: none;  
}  
  
/* 如果需要，可以添加一个按钮焦点状态的样式 */  
.custom-button:focus {  
    outline: none; /* 移除默认的焦点轮廓 */  
    /* 可以在这里添加焦点状态的样式 */  
}

.countdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.digit {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 30px;
    text-align: center;
    background-color: #4CAF50;
    color: #fff;
    border-radius: 50%;
    margin: 0 10px;
}

#time-label {
    color: #999;
    margin-top: 20px;
}