.night {
  background: #000;
}

.night .hours,
.night .minutes,
.night .seconds,
.night div.d:after,
.night .clock:before {
  background: #fff;
}

.night svg {
  fill: #fff
}

.day {
  background: #fff;
}

.day .hours,
.day .minutes,
.day .seconds,
.day div.d:after,
.day .clock:before {
  background: #000;
}

.day svg {
  fill: #000
}

.clock {
  position: relative;
}

svg {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-75%, -50%);
  width: 20%;
}

.clock:before {
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4%;
  height: 4%;
  z-index: 11;
}

.minutes-container,
.hours-container,
.seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours {
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}

.minutes {
  height: 40%;
  left: 49.25%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 1.5%;
}

.seconds {
  height: 40%;
  left: 49.6%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 0.8%;
  z-index: 8;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

.hours-container {
  animation: rotate 43200s infinite steps(60);
}

.minutes-container {
  transition: transform 0.2s cubic-bezier(.4, 2.08, .55, .44)
}

.seconds-container {
  transition: transform 0.2s cubic-bezier(.4, 2.08, .55, .44)
}

div.d {
  width: 4%;
  height: 50%;
  position: absolute;
  left: 48%;
  transform-origin: 50% 100%;
}

div.d:after {
  content: '';
  border-radius: 50%;
  position: absolute
}

.l:after {
  width: 100%;
  height: 8%;
  top: -4%
}

.m:after {
  width: 75%;
  height: 6%;
  top: -3%;
  left: 12.5%
}

.s:after {
  width: 50%;
  height: 4%;
  top: -2%;
  left: 25%
}

.d-l-0 {
  transform: rotateZ(0deg);
}

.d-s-1 {
  transform: rotateZ(30deg);
}

.d-m-2 {
  transform: rotateZ(60deg);
}

.d-l-3 {
  transform: rotateZ(90deg);
}

.d-s-4 {
  transform: rotateZ(120deg);
}

.d-m-5 {
  transform: rotateZ(150deg);
}

.d-l-6 {
  transform: rotateZ(180deg);
}

.d-s-7 {
  transform: rotateZ(210deg);
}

.d-m-8 {
  transform: rotateZ(240deg);
}

.d-l-9 {
  transform: rotateZ(270deg);
}

.d-s-10 {
  transform: rotateZ(300deg);
}

.d-m-11 {
  transform: rotateZ(330deg);
}