/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #282c34;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* 响应式倒计时容器样式 */
.countdown-container {
    text-align: center;
    background-color: #444;
    padding: 5vw; /* 使用 vw 单位，根据视口宽度调整内边距 */
    border-radius: 2vw; /* 圆角边框，使用相对单位 */
    box-shadow: 0 0 3vw rgba(0, 0, 0, 0.7); /* 添加阴影效果 */
    max-width: 80vw; /* 使用视口宽度的 80% 作为最大宽度 */
    width: 100%;
}

/* 响应式倒计时显示框 */
#countdown-wrapper {
    font-size: 12vw; /* 使用 vw 单位来调整字体大小，随着页面缩放 */
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

#countdown-wrapper input {
    width: 15vw; /* 使用 vw 单位来调整输入框的宽度 */
    text-align: center;
    background-color: transparent;
    color: #ffffff;
    border: none;
    font-size: 12vw; /* 使用 vw 单位来调整字体大小 */
    font-weight: bold;
    outline: none; /* 去除输入框的默认轮廓 */
}

/* 按钮样式保持不变，但使用相对单位 */
button {
    background-color: #61dafb;
    color: #282c34;
    border: none;
    padding: 1vw 2vw;
    margin: 1vw;
    border-radius: 1vw;
    font-size: 2vw;
    cursor: pointer;
}

button:hover {
    background-color: #21a1f1;
}

.buttons {
    margin-top: 2vw; /* 按钮组顶部间距，使用相对单位 */
}