<div class="clock">
  <div id="Date"></div>
    <ul>
        <li id="hrs"></li>
        <li id="col">:</li>
        <li id="min"></li>
        <li id="col">:</li>
        <li id="sec"></li>
    </ul>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-6 klick">
      <a class="ghost night">Night</a>
    </div>
    <div class="col-lg-6 klick">
      <a class="ghost day">Day</a>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Rajdhani:500);

body {
  font-family: 'Rajdhani', sans-serif;
  /*opacity: 0.3;*/
  background: url(https://freenaturestock.s3.amazonaws.com/570.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.clock {
    background-color: rgba(0,0,0, .1);
    width: 800px;
    margin: 120px auto;
    padding: 30px;
    color: #000;
    border: 1px solid #333;
}

#Date {
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    text-align: center;
}

ul {
    width: 800px;
    margin: 0 auto;
    padding: 0px;
    list-style: none;
    text-align: center;
}

ul li {
    display: inline;
    font-size: 10em;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
}

#col {
    position: relative;
    -moz-animation: mymove 1s ease infinite;
    -webkit-animation: mymove 1s ease infinite;
    padding-left: 10px;
    padding-right: 10px;
}

/* Simple Animation */
@-webkit-keyframes mymove {
    0% {opacity: 1.0;
}

50% {
    opacity: 0;
    text-shadow: none;
}

100% {
    opacity: 1.0;
} 
}

@-moz-keyframes mymove {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0;
        text-shadow: none;
    }

    100% {
        opacity: 1.0;
    };
}

@media all and (max-width: 600px){
  body{
    max-width: auto;
  }
  .clock{
    max-width: 100%;
  }
  ul {
    max-width: 100%;
  }
}

/*Night*/

.klick {
  text-align:center;
}

.ghost {
 color: #000;
 background: rgba (0,0,0, .6);
 border: 1px solid #000;
 font-size: 17px;
 padding: 7px 12px;
 font-weight: normal;
 margin: 6px 0;
 margin-right: 12px;
 display: inline-block;
 text-decoration: none;
 font-family: 'Open Sans', sans-serif;
 min-width: 120px;
 text-align: center;
 border-radius: 2px;
}

.ghost:hover, .ghost-button:active {
  color:#fff;
  background: #000;
}

@media all and (max-width: 600px){
  .klick {
    float: left;
  }
}

$(document).ready(function() {

 //Name it all.. 
  
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

var newDate = new Date();
newDate.setDate(newDate.getDate());
   
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
  var seconds = new Date().getSeconds();
  $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
  },1000);
  
setInterval( function() {
  var minutes = new Date().getMinutes();
  $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
  
setInterval( function() {
  var hours = new Date().getHours();
  $("#hrs").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000); 

//Made this Clock with Alessio Atzenis Tutorial on http://www.jqueryrain.com/?GFHGsTco

  
  $(".night").click(function() {
    $(".clock").css("background-color", "rgba(0,0,0, .9)");
    $("ul, #Date").css("color", "#b1d4d4");
  });

  $(".day").click(function() {
    $(".clock").css("background-color", "rgba(0,0,0, .1)");
    $("ul, #Date").css("color", "#000");
  });
});