<div class="wrapper">
  <div class="container text-center">
    <div class="col-md-12">
      <h1 id="header" class="">New Year Countdown</h1>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-pane">
          <div id="days" class="num">00</div>
        </div>
        <div class="well bottom-pane">
          <div id="days-text" class="text">Days</div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-pane">
          <div id="hours" class="num">00</div>
        </div>
        <div class="well bottom-pane">
          <div id="hours-text" class="text">Hours</div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-pane">
          <div id="mins" class="num">00</div>
        </div>
        <div class="well bottom-pane">
          <div id="mins-text" class="text">Minutes</div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-xs-6">
      <div class="clock">
        <div class="well top-pane">
          <div id="secs" class="num">00</div>
        </div>
        <div class="well bottom-pane">
          <div id="secs-text" class="text">Seconds</div>
        </div>
      </div>
    </div>
    <div id="info" class="small"></div>
  </div>
</div>

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

body {
  background: transparent;
  color: #ffffff;
}

.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;
}

.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;
}

@media (min-width: 768px) {
  .num {
    font-size: 100px;
  }
}

@media (max-width: 767px) {
  .num {
    font-size: 50px;
  }
}

@media (max-width: 480px) {
  .num {
    font-size: 30px;
  }
}

@media (min-width: 768px) {
  .text {
    font-size: 35px;
  }
}

@media (max-width: 767px) {
  .text {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .text {
    font-size: 15px;
  }
}

@media (min-width: 768px) {
  body {
    padding-top: 75px;
  }
}

h1 {
  padding-top: 10px;
}

@media (min-width: 768px) {
  h1 {
    margin-bottom: 75px;
    font-size: 100px;
  }
}

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 = 'January 1 ' + (today.getFullYear() + 1) + " 00:00:00";
  if (today.getMonth() == 0 && today.getDate() == 1) {
    deadline = 'January 1 ' + (today.getFullYear()) + " 00:00:00";
  };
  
  $("#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);
  
});