<time id="currtime"></time>

@import url(https://fonts.googleapis.com/css?family=Nunito:300&text=:);
html { height: 100%; }
body { 
  min-height: 100%; margin: 0; 
  background: rgb(0,122,255); color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#currtime { 
  font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; 
  font-weight: 100;
  display: block;
  text-align: center;
  font-size: 12vw;
  padding: 4rem 0;
}
#currtime span { 
  display: inline-block;
  font-family: Avenir Next, Nunito, sans-serif;
  font-weight: 100;
  font-size: 8vw;
  position: relative;
  top: -2vw;
}
@media all and (max-width: 600px) {
  #currtime { 
    font-size: 4rem;
    padding: 2rem 0;
  }
}
@media all and (max-width: 350px) { 
  #currtime { font-size: 3rem; padding: 2rem 0; }
}

var currentTime = document.getElementById("currtime");
function zeropadder(n) {
  return (parseInt(n,10) < 10 ? '0' : '')+n;
}
function updateTime(){
  var timeNow= new Date(),
  hh = timeNow.getHours(),
  mm = timeNow.getMinutes(),
  ss = timeNow.getSeconds(),
  formatAMPM = (hh >= 12?'PM':'AM');
  hh = hh % 12 || 12;
  currentTime.innerHTML = hh + "<span>:</span>" + zeropadder(mm) + "<span>:</span>" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);
}
updateTime();