div(class='wrapper')
  div(id='time')

.wrapper {
  color: #fff;
  display: grid;
  grid-template-areas: 
    ". a a ."
    ". a a .";
  grid-auto-rows: 50vh;
  background-color: #1976d2;
}

#time {
  grid-area: a;
  font-size: 20vw;
  align-self: center;
  justify-self: center;
  font-family: 'Inconsolata', monospace;
  background: #000;
  padding: 5vw;
  border-radius: 5vw;
  box-shadow: 2vw 1vw 7vw 0 rgba(0,0,0,0.75);
}

const clock = document.querySelector("#time");

function getTime() {
  return new Date()
    .toLocaleTimeString("de-DE", {
      hour12: false,
      hour: "numeric",
      minute: "numeric"
    })
    .toString();
}

function setTime() {
  let time = getTime();
  if (clock.innerText.split(":").length === 1) {
    clock.innerText = time;
  } else {
    clock.innerText = time.split(":").join(" ");
  }
}

setInterval(setTime, 1000);
setTime();