body {
  font-size: 16px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow:hidden;
}

.digit {
  background: #000;
  width: 110px;
  height: 200px;
  margin: auto;
  -webkit-filter: blur(5px) contrast(5);
          filter: blur(5px) contrast(5);
}
.digit .segment {
  background: white;
  width: calc(100px / 3);
  height: calc(100px / 3);
  position: absolute;
  border-radius: 100%;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  transition: -webkit-transform ease 1000ms;
  transition: transform ease 1000ms;
  transition: transform ease 1000ms, -webkit-transform ease 1000ms;
}
.digit .segment:nth-child(1) {
  top: 5px;
  left: 5px;
}
.digit .segment:nth-child(2) {
  top: 5px;
  left: calc(100px / 3 * 1);
}
.digit .segment:nth-child(3) {
  top: 5px;
  left: calc(100px / 3 * 2);
}
.digit .segment:nth-child(4) {
  top: calc(200px / 6);
  left: 5px;
}
.digit .segment:nth-child(5) {
  top: calc(200px / 6);
  left: calc(100px / 3 * 1);
}
.digit .segment:nth-child(6) {
  top: calc(200px / 6);
  left: calc(100px / 3 * 2);
}
.digit .segment:nth-child(7) {
  top: calc(200px / 6 * 2);
  left: 5px;
}
.digit .segment:nth-child(8) {
  top: calc(200px / 6 * 2);
  left: calc(100px / 3 * 1);
}
.digit .segment:nth-child(9) {
  top: calc(200px / 6 * 2);
  left: calc(100px / 3 * 2);
}
.digit .segment:nth-child(10) {
  top: calc(200px / 6 * 3);
  left: 5px;
}
.digit .segment:nth-child(11) {
  top: calc(200px / 6 * 3);
  left: calc(100px / 3 * 1);
}
.digit .segment:nth-child(12) {
  top: calc(200px / 6 * 3);
  left: calc(100px / 3 * 2);
}
.digit .segment:nth-child(13) {
  top: calc(200px / 6 * 4);
  left: 5px;
}
.digit .segment:nth-child(14) {
  top: calc(200px / 6 * 4);
  left: calc(100px / 3 * 1);
}
.digit .segment:nth-child(15) {
  top: calc(200px / 6 * 4);
  left: calc(100px / 3 * 2);
}
.digit.d-0 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(4) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(10) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(13) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(14) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-0 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-1 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-1 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-1 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-1 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-1 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-1 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(8) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(10) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(13) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(14) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-2 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(8) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(13) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(14) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-3 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(4) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(8) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-4 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(4) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(8) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(13) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(14) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-5 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(4) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(8) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(10) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(13) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(14) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-6 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-7 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-7 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-7 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-7 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-7 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-7 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-7 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(4) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(8) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(10) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(13) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(14) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-8 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(1) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(2) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(3) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(4) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(6) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(7) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(8) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(9) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(12) {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.digit.d-9 .segment:nth-child(15) {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.clock > div {
  float: left;
}
.clock > div:nth-of-type(2n) {
  margin-right: 80px;
}