.analogue-clock {
  background: #FFF;
  width: 301px;
  height: 301px;
  margin: 8% auto 0;
  border-radius: 50%;
  border: 10px solid #000;
  position: relative;
  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #AAA;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 10;
  box-shadow: 0 2px 4px -1px black;
}

.hour-hand, .minute-hand, .second-hand {
  border: 1px solid #AAA;
}

.hour-hand {
  position: absolute;
  z-index: 5;
  width: 6px;
  height: 65px;
  background: #333;
  top: 79px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.minute-hand {
  position: absolute;
  z-index: 6;
  width: 5px;
  height: 100px;
  background: #666;
  top: 46px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 105px;
}

.second-hand {
  position: absolute;
  z-index: 7;
  width: 2px;
  height: 120px;
  background: gold;
  top: 26px;
  lefT: 50%;
  margin-left: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 125px;
}

span {
  display: inline-block;
  position: absolute;
  color: #333;
  font-size: 22px;
  font-family: 'Pangolin', cursive;
  font-weight: 700;
  z-index: 4;
}

.h12 {
  top: 30px;
  left: 50%;
  margin-left: -9px;
  color: rgb(255, 0, 0);
}
.h3 {
  top: 140px;
  right: 30px;
  color: rgb(128, 255, 0);
}
.h6 {
  bottom: 30px;
  left: 50%;
  margin-left: -5px;
  color: rgb(0, 255, 255);
}
.h9 {
  left: 32px;
  top: 140px;
  color: rgb(128, 0, 255);
}

.diallines {
  position: absolute;
  z-index: 2;
  width: 2px;
  height: 15px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
  /* display: none; */
}
.diallines:nth-of-type(5n) {
  /* display: block; */
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 20px;
  background: rgb(255, 0, 0);
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}

.info {
  position: absolute;
  width: 120px;
  height: 20px;
  border-radius: 7px;
  background: #000;
  text-align: center;
  line-height: 22px;
  color: #FFF;
  font-size: 14px;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  font-family: "Pangolin", cursive;
  font-weight: bold;
  z-index: 3;
  letter-spacing: 3px;
  margin-left: -60px;
  left: 50%;
}
.date {
  top: 80px;
}
.date p {
  display: inline;
}
.day {
  top: 200px;
}