body {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,0,30,0.3)), to(rgba(0,0,255,0.6)));
  background: linear-gradient(rgba(255,0,30,0.3), rgba(0,0,255,0.6));
  height: 100vh;
}
.clock {
  width: 290px;
  height: 290px;
  /*background: white;*/
}

.clock-face {
  border-radius: 50%;
  border: solid 2px white;
  height: 100%;
  width: 100%;
  position: relative;
}

.hand {
  width: 45%;
  height: 2px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 0%;
          transform-origin: 0%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transition: 200ms;
  transition: 200ms;
  -webkit-transition-timing-function: cubic-bezier(0.13, 1.76, 0.4, 1.01);
          transition-timing-function: cubic-bezier(0.13, 1.76, 0.4, 1.01);
}

.second-hand {
  background: gold;
}

.hour-hand {
  width: 30%;
}