/* ===== BODY ===== */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(59, 56, 56);
  font-family: Arial, sans-serif;
}

/* ===== CLOCK ===== */
.clock {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: #000;
  border: 6px solid #252323;
  position: relative;
}

/* ===== NUMBERS ===== */
.number {
  position: absolute;
  color: rgb(157, 155, 155);
  font-size: 18px;
  font-weight: bold;
}

/* Perfect straight positions */
.n12 { top: 10px; left: 50%; transform: translateX(-50%); }
.n3  { right: 10px; top: 50%; transform: translateY(-50%); }
.n6  { bottom: 10px; left: 50%; transform: translateX(-50%); }
.n9  { left: 10px; top: 50%; transform: translateY(-50%); }

.n1  { top: 30px; right: 70px; }
.n2  { top: 80px; right: 30px; }
.n4  { bottom: 80px; right: 30px; }
.n5  { bottom: 30px; right: 70px; }

.n7  { bottom: 30px; left: 70px; }
.n8  { bottom: 80px; left: 30px; }
.n10 { top: 80px; left: 30px; }
.n11 { top: 30px; left: 70px; }

/* ===== HANDS ===== */
.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
  transform: translateX(-50%);
}

.hour {
  height: 75px;
  width: 6px;
  background: rgb(75, 73, 73);
}

.minute {
  height: 110px;
  width: 4px;
  background: #6e6767;
}

.second {
  height: 130px;
  width: 2px;
  background: rgb(13, 200, 210);
}

/* ===== CENTER DOT ===== */
.center-dot {
  width: 12px;
  height: 12px;
  background: rgb(9, 216, 223);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}