body{
  font-family: 'Smythe', sans-serif;
  text-align:center;
  background-color: #222;
  color:#111;
}


.container { 
  width: 200px;
  height: 260px;
  position: relative;
  -webkit-perspective: 800;
}

.clock{
  background-color: #CCC;
  position: absolute;
  -webkit-perspective-origin: 25% 75%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 600ms;
  background-color: #e7c585;   
  background-image: -webkit-radial-gradient(46% 45%, circle cover, hsl(39, 67%, 71%), hsl(39, 67%, 71%) 58%,hsla(38, 34%, 48%, 0.6) 60%,hsl(38, 34%, 48%) 68%,hsl(40, 31%, 46%) 66%);
}

.clock:hover{
  /*-webkit-transform: scale(1) rotateY(36deg) rotateX(75deg);*/
}

.circle{

}
.cent{
  position:absolute;
  border-radius:100px;
  
  z-index: 1;
  background-color:#000;
}
.white{
  position: relative;
  background-color: white;
}

.number{
  -webkit-transform-origin-y: 0;
  position: absolute;
}

.center{
  position:relative;
}

.center .hand{
  width:3px;
  background-color: #222;
  position: absolute;
  -webkit-transform-origin-y: 0;
}

.hand.seconds{
  background-color: #ff0000;
}