body,
html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.clock {
  position: relative;
  width: 80vmin;
  height: 80vmin;
  border-color: black;
  border-width: 2vmin;
  border-style: solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: 0% 0%; /* Anchors the rotation at the bottom-center of each hand */
  left: 51%; /* Ensures the hand is centered horizontally */
}

.hour-hand {
  width: 1vmin; /* Slightly thicker than the minute hand */
  height: 35%; /* This makes the hand extend from the center to the edge of the clock */
  bottom: 15%; /* Ensures the hand starts from the center of the clock */
}

.minute-hand {
  width: 0.8vmin; /* Keep consistent or adjust as needed */
  height: 44%; /* This makes the hand extend from the center to the edge of the clock */
  bottom: 6%; /* Ensures the hand starts from the center of the clock */
}

.nub {
  position: absolute;
  width: 4vmin;
  height: 4vmin;
  background-color: black;
  border-radius: 50%;
}

.controls {
  margin-top: 20px;
}

.controls label {
  font-size: 1.5em;
}

.controls input {
  margin-right: 16px;
}

input[type="color"] {
  margin-left: 2px;
}
.number {
  position: absolute;
  width: 110px;
  height: 20px;
  text-align: center;
  line-height: 30px;
  font-size: 9vmin;
  transform-origin: center center;
  left: 50%;
  top: 49%;
}

/* Adjusting the distance from the center */
.number4 {
  transform: translateX(-50%) translateY(-50%) rotate(30deg) translate(35vmin)
    rotate(-30deg);
}
.number5 {
  transform: translateX(-50%) translateY(-50%) rotate(60deg) translate(35vmin)
    rotate(-60deg);
}
.number6 {
  transform: translateX(-50%) translateY(-50%) rotate(90deg) translate(35vmin)
    rotate(-90deg);
}
.number7 {
  transform: translateX(-50%) translateY(-50%) rotate(120deg) translate(35vmin)
    rotate(-120deg);
}
.number8 {
  transform: translateX(-50%) translateY(-50%) rotate(150deg) translate(35vmin)
    rotate(-150deg);
}
.number9 {
  transform: translateX(-50%) translateY(-50%) rotate(180deg) translate(35vmin)
    rotate(-180deg);
}
.number10 {
  transform: translateX(-50%) translateY(-50%) rotate(210deg) translate(35vmin)
    rotate(-210deg);
}
.number11 {
  transform: translateX(-50%) translateY(-50%) rotate(240deg) translate(35vmin)
    rotate(-240deg);
}
.number12 {
  transform: translateX(-50%) translateY(-50%) rotate(270deg) translate(35vmin)
    rotate(-270deg);
}
.number1 {
  transform: translateX(-50%) translateY(-50%) rotate(300deg) translate(35vmin)
    rotate(-300deg);
}
.number2 {
  transform: translateX(-50%) translateY(-50%) rotate(330deg) translate(35vmin)
    rotate(-330deg);
}
.number3 {
  transform: translateX(-50%) translateY(-50%) rotate(0deg) translate(35vmin)
    rotate(0deg);
}