<div class="timer-background">
    <div class="countdown-wrapper" id="countdown-timer">
        <div class="countdown-item">
            <span id="days">117</span>
            <span>Days</span>
        </div>
        <div class="countdown-item">
            <span id="hours">19</span>
            <span>Hours</span>
        </div>
        <div class="countdown-item">
            <span id="minutes">19</span>
            <span>Minutes</span>
        </div>
        <div class="countdown-item">
            <span id="seconds">00</span>
            <span>Seconds</span>
        </div>
    </div>
    <div id="times-up-message" style="display:none;"> EHTP RUNS NYC 50TH MARATHON.</div>
</div>

<style>
.timer-background {
    min-height: 150px;
    background-color: #fbb040;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.countdown-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    font-family: var(--body-font-font-family);
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
}

.countdown-item span:first-child {
    font-size: 3rem;
    font-weight: bold;
    color:#ffffff;
}

.countdown-item span:last-child {
    font-size: 1rem;
    color: #ffffff;
    text-transform: uppercase;
    margin-top: 10px;
}
</style>

<script>
function updateCountdown() {
    const target = new Date('NOVEMBER 01, 2026 23:59:59 EDT-0000').getTime();
    const countdown = document.getElementById('countdown-timer');
    const message = document.getElementById('times-up-message');

    function update() {
        const now = new Date().getTime();
        const diff = target - now;

        if (diff <= 0) {
            countdown.style.display = 'none';
            message.style.display = 'block';
            clearInterval(interval);
            return;
        }

        document.getElementById('days').textContent = Math.floor(diff / (1000 * 60 * 60 * 24));
        document.getElementById('hours').textContent = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        document.getElementById('minutes').textContent = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        document.getElementById('seconds').textContent = Math.floor((diff % (1000 * 60)) / 1000);
    }

    update();
    const interval = setInterval(update, 1000);
}

updateCountdown();
</script>