<div class="clock">
  <div id="h1" class="clock__digit">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div id="h2" class="clock__digit">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

  <div class="clock__spacer"></div>

  <div id="m1" class="clock__digit">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div id="m2" class="clock__digit">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

  <div class="clock__spacer"></div>

  <div id="s1" class="clock__digit">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div id="s2" class="clock__digit">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

// Default
$c1: hsl(216, 0%, 100%);
$c2: hsl(214, 4%, 92%);
$c3: hsl(216, 10%, 85%);
$c4: hsl(216, 7%, 77%);

$s: 5px;
$b: 12px;

$s1: 100px;
$s2: 30px;

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $c2;
}

.clock {
  display: flex;
  flex-direction: row;
}

.clock__digit {
  width: 100px;
  height: 200px;
  margin: 0 10px;
  display: grid;
  grid-template-areas:
    "g1 g2 g3"
    "g4 .  g5"
    "g6 g7 g8"
    "g9 .  g10"
    "g11 g12 g13";
  grid-template-rows: 1fr 2fr 1fr 2fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 10px;
}

.clock__digit > span {
  background-color: $c2;
  box-shadow: 0 0 0 $c4, (-1 * 0) (-1 * 0) 0 $c1;
  position: relative;
  transition: box-shadow 0.75s ease;

  @for $i from 1 through 14 {
    &:nth-child(#{$i}) {
      grid-area: g + $i;
      z-index: $i;
    }
  }
}

.clock__spacer {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 0 40px;

  &:before,
  &:after {
    content: "";
    display: block;
    box-shadow: $s $s $b $c4, (-1 * $s) (-1 * $s) $b $c1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}

.clock__digit {
  &.zero {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(4),
    span:nth-child(5),
    span:nth-child(6),
    span:nth-child(8),
    span:nth-child(9),
    span:nth-child(10),
    span:nth-child(11),
    span:nth-child(12),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }
  &.one {
    span:nth-child(3),
    span:nth-child(5),
    span:nth-child(8),
    span:nth-child(10),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.two {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(5),
    span:nth-child(6),
    span:nth-child(7),
    span:nth-child(8),
    span:nth-child(9),
    span:nth-child(11),
    span:nth-child(12),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.three {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(5),
    span:nth-child(6),
    span:nth-child(7),
    span:nth-child(8),
    span:nth-child(10),
    span:nth-child(11),
    span:nth-child(12),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.four {
    span:nth-child(1),
    span:nth-child(3),
    span:nth-child(4),
    span:nth-child(5),
    span:nth-child(6),
    span:nth-child(7),
    span:nth-child(8),
    span:nth-child(10),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.five {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(4),
    span:nth-child(6),
    span:nth-child(7),
    span:nth-child(8),
    span:nth-child(10),
    span:nth-child(11),
    span:nth-child(12),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.six {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(4),
    span:nth-child(6),
    span:nth-child(7),
    span:nth-child(8),
    span:nth-child(9),
    span:nth-child(10),
    span:nth-child(11),
    span:nth-child(12),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.seven {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(5),
    span:nth-child(8),
    span:nth-child(10),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.eight {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(4),
    span:nth-child(5),
    span:nth-child(6),
    span:nth-child(7),
    span:nth-child(8),
    span:nth-child(9),
    span:nth-child(10),
    span:nth-child(11),
    span:nth-child(12),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }

  &.nine {
    span:nth-child(1),
    span:nth-child(2),
    span:nth-child(3),
    span:nth-child(4),
    span:nth-child(5),
    span:nth-child(6),
    span:nth-child(7),
    span:nth-child(8),
    span:nth-child(10),
    span:nth-child(13) {
      @extend %unit--on;
    }
  }
}

%unit--on {
  box-shadow: $s $s $b $c4, (-1 * $s) (-1 * $s) $b $c1;
}

var numname = [
  "zero",
  "one",
  "two",
  "three",
  "four",
  "five",
  "six",
  "seven",
  "eight",
  "nine"
];

function getCurrentSeconds() {
  var dNow = new Date();
  return dNow.getSeconds() + 60 * (dNow.getMinutes() + 60 * dNow.getHours());
}

var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");

var m1 = document.getElementById("m1");
var m2 = document.getElementById("m2");

var h1 = document.getElementById("h1");
var h2 = document.getElementById("h2");

var start = new Date().getTime();
var interval = 1000;

function countUp() {
  var count = getCurrentSeconds();

  // Only update if at least a second has passed.
  if (new Date().getTime() - start >= interval) {
    start = new Date().getTime();

    s2.className = "clock__digit " + numname[(count % 60) % 10];

    s1.className = "clock__digit " + numname[Math.floor((count % 60) / 10)];

    m2.className =
      "clock__digit " + numname[Math.floor(((count / 60) % 60) % 60) % 10];

    m1.className =
      "clock__digit " + numname[Math.floor((((count / 60) % 60) % 60) / 10)];

    h2.className =
      "clock__digit " + numname[Math.floor(((count / 3600) % 60) % 24) % 10];

    h1.className =
      "clock__digit " + numname[Math.floor((((count / 3600) % 60) % 24) / 10)];
  }

  requestAnimationFrame(countUp);
}

var raf = requestAnimationFrame(countUp);