html, body {
    height: 100%;
}

body {
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background: url("bg.png") no-repeat center fixed;
    -webkit-background-size: cover;
    background-size: cover;

    top: 5%;
    position: relative;
}

.container {
    max-width: 500px;
}

/* Countdown container */
#countdown-container {
    max-width: 720px;
    margin: 0 auto;
}

/* Countdown box */
.countdown-box {
    background: linear-gradient(135deg, #1f2933, #111827);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    color: #e5e7eb;
}

/* Title */
.countdown-title {
    font-size: 18px;
    font-weight: 700;
    color: #93c5fd;
    margin-bottom: 8px;
}

/* Time text */
.countdown-time {
    font-size: 17px;
    font-family: "Courier New", monospace;
    color: #f9fafb;
}

/* Small animation (subtle glow) */
.countdown-box {
    animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
    0%   { box-shadow: 0 0 0 rgba(59,130,246,0.3); }
    50%  { box-shadow: 0 0 20px rgba(59,130,246,0.6); }
    100% { box-shadow: 0 0 0 rgba(59,130,246,0.3); }
}