@import url(http://fonts.lug.ustc.edu.cn/css?family=Montserrat:400,700);

* {
  box-sizing: border-box;
}

body {
  background: crimson;
}

figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border: 8px solid black;
  border-radius: 100%;
  background: gold;
  div {
    position: absolute;
    border-radius: 50px;
    transform: translate(-50%, -50%);
    font: 400 20px 'Montserrat';
  }
  
  .twelve {
    top: 20px;
    left: 50%;
  }
  .six {
    bottom: 0;
    left: 50%;
  }
  .three {
    top: 50%;
    left: 20px;
  }
  .nine {
    top: 50%;
    right: 10px;
  }
  .hour-hand, .minute-hand, .second-hand, {
    top: 50%;
    left: 50%;
    transform-origin: top center;
    background: black;
  }
  .hour-hand {
    width: 6px;
    height: 50px;
    transform: translateX(-50%) rotate(180deg);
  }
  .minute-hand {
    width: 4px;
    height: 65px;
    transform: translateX(-50%) rotate(180deg);
  }
  .second-hand {
    width: 2px;
    height: 75px;
    transform: translateX(-50%) rotate(180deg);
  }
  .center {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
  }
}