body {
  background: #6fd1b5;
  font-family: "ATC Duel";
  text-align: center;
}

.minutes,
.hours,
.unites,
.dizaines,
.number,
.logo,
.btn,
.seconds-wrapper,
.seconds,
.second,
.seconds-wrapper:before,
.clock-wrapper:before,
.clock-wrapper:after,
.up,
.down,
.digit,
.knob,
.knob-lines,
.hours:before,
.bg {
  position: absolute;
}

.clock-wrapper {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 33.5vmin 8.5vmin;
  width: 83vmin;
  height: 26.5vmin;
}
.clock-wrapper:before {
  right: 5vmin;
  bottom: -4vmin;
  left: 5vmin;
  display: block;
  height: 4vmin;
  background: #eadfb5;
  border-top: 1vmin solid #6ac5a9;
  content: "";
  transform: perspective(200px) rotateX(10deg);
}
.clock-wrapper:after {
  bottom: -4vmin;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background: #6ac5a9;
  border-radius: 1vmin;
  content: "";
  transform: perspective(100vmin) rotateX(60deg) skew(60deg);
  transform-origin: bottom right;
}
.clock-wrapper .bg {
  width: 100%;
  height: 100%;
  background: #eeead1;
  border-radius: 1vmin;
}

.seconds-wrapper {
  top: 5vmin;
  right: 16vmin;
  bottom: 5vmin;
  width: 8vmin;
  overflow: hidden;
  background: #472c4b;
  border-radius: 0.5vmin;
}
.seconds-wrapper:before {
  top: 50%;
  left: 0;
  z-index: 1;
  display: block;
  border: 1vmin solid transparent;
  border-right-width: 3.66vmin;
  border-left: 3.66vmin solid #f85302;
  content: "";
  transform: translateY(-50%);
}

.seconds {
  top: 50%;
  margin-top: 1.3vmin;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: secondsTick 60s infinite linear;
  animation-play-state: paused;
}

@-webkit-keyframes secondsTick {
  0% {
    -webkit-transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(-360deg);
  }
}
@-moz-keyframes secondsTick {
  0% {
    -moz-transform: rotateX(0deg);
  }
  100% {
    -moz-transform: rotateX(-360deg);
  }
}
@-ms-keyframes secondsTick {
  0% {
    -ms-transform: rotateX(0deg);
  }
  100% {
    -ms-transform: rotateX(-360deg);
  }
}
@keyframes secondsTick {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-360deg);
  }
}
.second {
  font-size: 1.5vmin;
  color: #fdb800;
  text-align: center;
  white-space: nowrap;
  line-height: 2.6vmin;
  letter-spacing: 0.05em;
  backface-visibility: hidden;
}
.second:before {
  display: inline-block;
  margin: -0.3vmin 1.3vmin 0 1vmin;
  width: 2.6vmin;
  height: 0.26vmin;
  background: currentColor;
  content: "";
  vertical-align: middle;
}
.second:nth-child(1) {
  transform: rotateX(6deg) translateZ(24.737347581vmin);
}
.second:nth-child(2) {
  transform: rotateX(12deg) translateZ(24.737347581vmin);
}
.second:nth-child(3) {
  transform: rotateX(18deg) translateZ(24.737347581vmin);
}
.second:nth-child(4) {
  transform: rotateX(24deg) translateZ(24.737347581vmin);
}
.second:nth-child(5) {
  transform: rotateX(30deg) translateZ(24.737347581vmin);
}
.second:nth-child(6) {
  transform: rotateX(36deg) translateZ(24.737347581vmin);
}
.second:nth-child(7) {
  transform: rotateX(42deg) translateZ(24.737347581vmin);
}
.second:nth-child(8) {
  transform: rotateX(48deg) translateZ(24.737347581vmin);
}
.second:nth-child(9) {
  transform: rotateX(54deg) translateZ(24.737347581vmin);
}
.second:nth-child(10) {
  transform: rotateX(60deg) translateZ(24.737347581vmin);
}
.second:nth-child(11) {
  transform: rotateX(66deg) translateZ(24.737347581vmin);
}
.second:nth-child(12) {
  transform: rotateX(72deg) translateZ(24.737347581vmin);
}
.second:nth-child(13) {
  transform: rotateX(78deg) translateZ(24.737347581vmin);
}
.second:nth-child(14) {
  transform: rotateX(84deg) translateZ(24.737347581vmin);
}
.second:nth-child(15) {
  transform: rotateX(90deg) translateZ(24.737347581vmin);
}
.second:nth-child(16) {
  transform: rotateX(96deg) translateZ(24.737347581vmin);
}
.second:nth-child(17) {
  transform: rotateX(102deg) translateZ(24.737347581vmin);
}
.second:nth-child(18) {
  transform: rotateX(108deg) translateZ(24.737347581vmin);
}
.second:nth-child(19) {
  transform: rotateX(114deg) translateZ(24.737347581vmin);
}
.second:nth-child(20) {
  transform: rotateX(120deg) translateZ(24.737347581vmin);
}
.second:nth-child(21) {
  transform: rotateX(126deg) translateZ(24.737347581vmin);
}
.second:nth-child(22) {
  transform: rotateX(132deg) translateZ(24.737347581vmin);
}
.second:nth-child(23) {
  transform: rotateX(138deg) translateZ(24.737347581vmin);
}
.second:nth-child(24) {
  transform: rotateX(144deg) translateZ(24.737347581vmin);
}
.second:nth-child(25) {
  transform: rotateX(150deg) translateZ(24.737347581vmin);
}
.second:nth-child(26) {
  transform: rotateX(156deg) translateZ(24.737347581vmin);
}
.second:nth-child(27) {
  transform: rotateX(162deg) translateZ(24.737347581vmin);
}
.second:nth-child(28) {
  transform: rotateX(168deg) translateZ(24.737347581vmin);
}
.second:nth-child(29) {
  transform: rotateX(174deg) translateZ(24.737347581vmin);
}
.second:nth-child(30) {
  transform: rotateX(180deg) translateZ(24.737347581vmin);
}
.second:nth-child(31) {
  transform: rotateX(186deg) translateZ(24.737347581vmin);
}
.second:nth-child(32) {
  transform: rotateX(192deg) translateZ(24.737347581vmin);
}
.second:nth-child(33) {
  transform: rotateX(198deg) translateZ(24.737347581vmin);
}
.second:nth-child(34) {
  transform: rotateX(204deg) translateZ(24.737347581vmin);
}
.second:nth-child(35) {
  transform: rotateX(210deg) translateZ(24.737347581vmin);
}
.second:nth-child(36) {
  transform: rotateX(216deg) translateZ(24.737347581vmin);
}
.second:nth-child(37) {
  transform: rotateX(222deg) translateZ(24.737347581vmin);
}
.second:nth-child(38) {
  transform: rotateX(228deg) translateZ(24.737347581vmin);
}
.second:nth-child(39) {
  transform: rotateX(234deg) translateZ(24.737347581vmin);
}
.second:nth-child(40) {
  transform: rotateX(240deg) translateZ(24.737347581vmin);
}
.second:nth-child(41) {
  transform: rotateX(246deg) translateZ(24.737347581vmin);
}
.second:nth-child(42) {
  transform: rotateX(252deg) translateZ(24.737347581vmin);
}
.second:nth-child(43) {
  transform: rotateX(258deg) translateZ(24.737347581vmin);
}
.second:nth-child(44) {
  transform: rotateX(264deg) translateZ(24.737347581vmin);
}
.second:nth-child(45) {
  transform: rotateX(270deg) translateZ(24.737347581vmin);
}
.second:nth-child(46) {
  transform: rotateX(276deg) translateZ(24.737347581vmin);
}
.second:nth-child(47) {
  transform: rotateX(282deg) translateZ(24.737347581vmin);
}
.second:nth-child(48) {
  transform: rotateX(288deg) translateZ(24.737347581vmin);
}
.second:nth-child(49) {
  transform: rotateX(294deg) translateZ(24.737347581vmin);
}
.second:nth-child(50) {
  transform: rotateX(300deg) translateZ(24.737347581vmin);
}
.second:nth-child(51) {
  transform: rotateX(306deg) translateZ(24.737347581vmin);
}
.second:nth-child(52) {
  transform: rotateX(312deg) translateZ(24.737347581vmin);
}
.second:nth-child(53) {
  transform: rotateX(318deg) translateZ(24.737347581vmin);
}
.second:nth-child(54) {
  transform: rotateX(324deg) translateZ(24.737347581vmin);
}
.second:nth-child(55) {
  transform: rotateX(330deg) translateZ(24.737347581vmin);
}
.second:nth-child(56) {
  transform: rotateX(336deg) translateZ(24.737347581vmin);
}
.second:nth-child(57) {
  transform: rotateX(342deg) translateZ(24.737347581vmin);
}
.second:nth-child(58) {
  transform: rotateX(348deg) translateZ(24.737347581vmin);
}
.second:nth-child(59) {
  transform: rotateX(354deg) translateZ(24.737347581vmin);
}
.second:nth-child(60) {
  transform: rotateX(360deg) translateZ(24.737347581vmin);
}

.btn {
  top: 12.5vmin;
  right: 5vmin;
  padding: 1.3vmin 0 1.1vmin;
  width: 6.5vmin;
  background: currentColor;
  box-shadow: inset 0 0 3vmin rgba(0, 0, 0, 0.2), 0 0 6vmin rgba(118, 255, 204, 0.75);
  color: #10ffa6;
  line-height: 1;
  font-family: "ATC Timberline";
  font-size: 1vmin;
  text-transform: uppercase;
  text-align: center;
}
.btn span {
  color: white;
  transition: color 0.3s;
}

.radio-btn {
  top: auto;
  bottom: 5vmin;
  cursor: pointer;
  box-shadow: inset 0 0 3vmin rgba(0, 0, 0, 0.2), 0 0 6vmin rgba(102, 247, 255, 0.75);
  color: #00f1ff;
  transition: box-shadow 0.3s;
}
.radio-btn span {
  color: rgba(255, 255, 255, 0.7);
}
.radio-btn:hover, .radio-btn.is-active {
  box-shadow: inset 0 0 3vmin rgba(0, 0, 0, 0.3), 0 0 6vmin #66f7ff;
}
.radio-btn:hover span, .radio-btn.is-active span {
  color: white;
}

.logo {
  top: 5vmin;
  right: 5vmin;
  font-family: "ATC Timberline";
  color: #472c4b;
  text-transform: uppercase;
  font-size: 2.6vmin;
  line-height: 1;
}

.minutes,
.hours {
  top: 5vmin;
  bottom: 5vmin;
  width: 25vmin;
}

.minutes {
  right: 26vmin;
}

.hours {
  left: 5vmin;
}

.unites, .dizaines {
  width: calc(50% - 1vmin);
}

.unites {
  right: 0;
}

.dizaines {
  left: 0;
}

.hours:before {
  top: 50%;
  right: -1.3vmin;
  display: block;
  margin-top: -2vmin;
  width: 0.8vmin;
  height: 4vmin;
  background: #6e4875;
  content: "";
}

.number {
  width: 100%;
  height: 16.5vmin;
  color: #fdb800;
  font-size: 12vmin;
  line-height: 16vmin;
}
.number.is-active {
  animation: zIndexUp 0.5s forwards;
}
.number.outgoing {
  animation: zIndexDown 0.5s forwards;
}

@-webkit-keyframes zIndexUp {
  0% {
    z-index: 1;
  }
  100% {
    z-index: 2;
  }
}
@-moz-keyframes zIndexUp {
  0% {
    z-index: 1;
  }
  100% {
    z-index: 2;
  }
}
@-ms-keyframes zIndexUp {
  0% {
    z-index: 1;
  }
  100% {
    z-index: 2;
  }
}
@keyframes zIndexUp {
  0% {
    z-index: 1;
  }
  100% {
    z-index: 2;
  }
}
@-webkit-keyframes zIndexDown {
  0% {
    z-index: 2;
  }
  100% {
    z-index: 1;
  }
}
@-moz-keyframes zIndexDown {
  0% {
    z-index: 2;
  }
  100% {
    z-index: 1;
  }
}
@-ms-keyframes zIndexDown {
  0% {
    z-index: 2;
  }
  100% {
    z-index: 1;
  }
}
@keyframes zIndexDown {
  0% {
    z-index: 2;
  }
  100% {
    z-index: 1;
  }
}
.up,
.down {
  width: 100%;
  height: calc(50% - 1px);
  overflow: hidden;
  background: #472c4b;
  border-radius: 0.7vmin;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: none;
}
.up:before,
.down:before {
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  transition: opactiy 0.25s;
}

.up {
  top: 0;
  transform-origin: bottom center;
}
.up:before {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.up .digit {
  line-height: 15vmin;
}

.down {
  bottom: 0;
  transform: perspective(100vmin) rotateX(180deg);
  transform-origin: top center;
}
.down:before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}
.down .digit {
  bottom: 0;
  line-height: 18vmin;
}

.digit {
  width: 100%;
}

.is-active .up:before,
.is-active .down:before {
  opacity: 0;
}
.is-active .down {
  transform: perspective(100vmin) rotateX(0deg);
  transition: transform 0.5s;
}

.outgoing .up {
  transform: perspective(100vmin) rotateX(-180deg);
  transition: transform 0.5s;
}
.outgoing .down {
  transform: perspective(100vmin) rotateX(0deg);
  transition: transform 0.5s;
}

.knob {
  top: 50%;
  right: -4vmin;
  width: 3vmin;
  height: 15vmin;
  background: #eeead1;
  border-radius: 0 1vmin 1vmin 0;
  transform: translateY(-50%);
}

.knob-lines {
  top: 50%;
  right: -3vmin;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateY(-50%);
}

.knob-line {
  margin: 0.75vmin 0;
  width: 2.6vmin;
  height: 0.25vmin;
  background: #472c4b;
}