html {
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
}

body {
    background: transparent;
    color: #ffffff;
    padding-top: 75px; /* Ensure there's padding on top for content */
}

.bluelight {
    text-shadow: 0 0 10px #3498DB,
                 0 0 20px #3498DB,
                 0 0 30px #3498DB,
                 0 0 40px #2980B9,
                 0 0 70px #2980B9,
                 0 0 80px #2980B9,
                 0 0 100px #2980B9,
                 0 0 150px #2980B9;
}

.clock {
    overflow: hidden;
    text-align: center; /* Ensures clock numbers are centered */
}

.col-md-12 {
    overflow: hidden;
    padding-bottom: 20px;
}

.top-pane {
    margin-bottom: 0px;
    border-radius: 5px 5px 0px 0px;
    background-color: #34495E;
    border: 0px;
}

.bottom-pane {
    margin-top: 0px;
    border-radius: 0px 0px 5px 5px;
    background-color: #2C3E50;
    border: 0px;
}

.num {
    font-size: 100px;
    line-height: 1.2;
}

.text {
    font-size: 35px;
}

h1 {
    padding-top: 10px;
    margin-bottom: 75px;
    font-size: 100px;
    text-align: center; /* Center the title */
}

@media (max-width: 1024px) {
    .num {
        font-size: 80px;
    }
    .text {
        font-size: 30px;
    }
    h1 {
        font-size: 80px;
    }
}

@media (max-width: 768px) {
    .num {
        font-size: 60px;
    }
    .text {
        font-size: 25px;
    }
    h1 {
        font-size: 60px;
    }
}

@media (max-width: 600px) {
    .num {
        font-size: 50px;
    }
    .text {
        font-size: 20px;
    }
    h1 {
        font-size: 50px;
    }
}

@media (max-width: 480px) {
    .num {
        font-size: 40px;
    }
    .text {
        font-size: 18px;
    }
    h1 {
        font-size: 40px;
    }
}

@media (max-width: 320px) {
    .num {
        font-size: 35px;
    }
    .text {
        font-size: 16px;
    }
    h1 {
        font-size: 35px;
    }
}

function timeLeft(endtime){
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor( (t / 1000) % 60 );
    var minutes = Math.floor( (t / 1000 / 60) % 60 );
    var hours = Math.floor( (t / (1000 * 60 * 60)) % 24 );
    var days = Math.floor( t / (1000 * 60 * 60 * 24) );
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

$(document).ready(function() {
    var today = new Date();
    var deadline = new Date(today.getFullYear() + 1, 0, 1, 0, 0, 0, 0); // Next year's New Year's Day at midnight
    if (today.getMonth() === 0 && today.getDate() === 1) {
        deadline = new Date(today.getFullYear(), 0, 1, 0, 0, 0, 0); // Current year's New Year's Day
    }

    $("#header").hover(function() {
        $(this).toggleClass('bluelight');
    });

    $(".clock").hover(function() {
        $(this).toggleClass('bluelight');
    });

    var setClock = function(newyear){
        var timeinterval = setInterval(function(){
            var t = timeLeft(newyear);
            $('#days').text(t.days);
            $('#hours').text(t.hours);
            $('#mins').text(('0' + t.minutes).slice(-2));
            $('#secs').text(('0' + t.seconds).slice(-2));

            if (t.total <= 0) {
                clearInterval(timeinterval);
                var now = new Date();
                var yearStr = now.getFullYear().toString();
                $('#header').text("Happy New Year!!!");
                $('#days').text(yearStr[0]);
                $('#days-text').text("Happy");
                $('#hours').text(yearStr[1]);
                $('#hours-text').text("New");
                $('#mins').text(yearStr[2]);
                $('#mins-text').text("Year");
                $('#secs').text(yearStr[3]);
                $('#secs-text').text("!!!");
                $('#info').text("Countdown starts again tomorrow!");
            }
        }, 1000);
    };
    setClock(deadline);
});