:root {
  --background: #282c34;
  --clockBorder: #000000;
  --clockBackground: #ffffff;
  --numLineColor: #4a4a4a;
  --numTextColor: #4a4a4a;

  --hourHandBackground: #313131;
  --minuteHandBackground: #313131;
  --secondHandBackground: #0288d1;
}

body { background: var(--background); }

.clock {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: 300px;
  width: 300px;
  background: var(--clockBackground);
  border-radius: 50%;
  border: 10px solid var(--clockBorder);
}

.hand {
  position: absolute;
  left: calc(50% - 2.5px);
  width: 5px;
  transform-origin: center bottom;
}

.hand.hours {
  height: 35%;
  top: calc(50% - 35%);
  background: var(--hourHandBackground);
}

.hand.minutes {
  height: 45%;
  top: calc(50% - 45%);
  background: var(--minuteHandBackground);
}

.hand.seconds {
  height: 50%;
  top: 0;
  background: var(--secondHandBackground);
}

.hand.seconds::before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 25px;
  bottom: -25px;
  background: inherit;
}

.hand.seconds::after {
  content: '';
  display: block;
  position: absolute;
  height: 20px;
  width: 20px;
  background: inherit;
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.num {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotate(var(--numRotation));
}

.num:after {
  position: absolute;
  content: '';
  left: 50%;
  transform: translateX(-50%);

  width: 2px;
  height: 15px;
  background-color: var(--numLineColor);
}

.num::before {
  position: absolute;
  content: attr(data-num);
  transform: translateX(-50%) rotate(calc(-1 * var(--numRotation)));
  left: 50%;
  top: 15px;
  font-size: 1.5rem;
  color: var(--numTextColor);
}

/* Rotation */
.num[data-num="1"]  { --numRotation: calc(1  * 360deg / 12); }
.num[data-num="2"]  { --numRotation: calc(2  * 360deg / 12); }
.num[data-num="3"]  { --numRotation: calc(3  * 360deg / 12); }
.num[data-num="4"]  { --numRotation: calc(4  * 360deg / 12); }
.num[data-num="5"]  { --numRotation: calc(5  * 360deg / 12); }
.num[data-num="6"]  { --numRotation: calc(6  * 360deg / 12); }
.num[data-num="7"]  { --numRotation: calc(7  * 360deg / 12); }
.num[data-num="8"]  { --numRotation: calc(8  * 360deg / 12); }
.num[data-num="9"]  { --numRotation: calc(9  * 360deg / 12); }
.num[data-num="10"] { --numRotation: calc(10 * 360deg / 12); }
.num[data-num="11"] { --numRotation: calc(11 * 360deg / 12); }
.num[data-num="12"] { --numRotation: calc(12 * 360deg / 12); }