/* 設定整個頁面的背景顏色和字體 */
body {
    background-color: #f0f0f0; /* 淺灰色背景 */
    font-family: Arial, sans-serif; /* 設定字體 */
    display: flex; /* 使用彈性盒子布局 */
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    height: 100vh; /* 高度為視窗高度 */
    margin: 0; /* 去除默認邊距 */
}

/* 設定容器的樣式 */
.container {
    text-align: center; /* 文字置中 */
}

/* 設定標題的樣式 */
h1 {
    font-size: 48px; /* 字體大小 */
    color: #333; /* 字體顏色 */
}

/* 設定倒計時的樣式 */
p {
    font-size: 24px; /* 字體大小 */
    color: #555; /* 字體顏色 */
}

/* 新增動畫效果的 CSS */
@keyframes slideUp {
    0% {
        transform: translateY(20px); /* 從底部移動 */
        opacity: 0; /* 開始時透明 */
    }
    100% {
        transform: translateY(0); /* 移回原位 */
        opacity: 1; /* 完全不透明 */
    }
}

/* 設定倒計時的樣式 */
p {
    font-size: 24px; /* 字體大小 */
    color: rgba(85, 85, 85, 0.5); /* 半透明顏色 */
    animation: slideUp 0.5s forwards; /* 應用動畫 */
    display: none; /* 初始隱藏 */
}

/* 當顯示時，改變顏色為不透明 */
p.visible {
    color: #555; /* 不透明顏色 */
}