*,
*::after,
.tempo::before {
  font-family: sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.tempo {
 
   
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  background-color: rgb(255, 255, 255);
  height: 20rem;
  width: 20rem;
  border-radius: 50%;
  border: none;
  box-shadow: inset 8px 8px 15px rgb(9, 7, 52),
    inset -8px -8px 15px rgb(9, 7, 52), 2px -2px 3px rgb(255, 255, 255),
    -2px 2px 3px rgb(255, 255, 255), -2px -2px 3px rgb(255, 255, 255),
    2px 2px 3px rgb(255, 255, 255);
  position: relative;
}

.clock .number {
  --rotation_number: 0;
  color: black;
  position: absolute;
  display: inline-block;
  transform: rotate(calc(var(--rotation_number) * 30deg));
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bolder;
}

.number.number3,
.number.number6,
.number.number9,
.number.number12 {
  display: flex;
  padding: 1rem;
}

.number.number3,
.number.number9 {
  align-items: center;
}

.number.number6,
.number.number12 {
  justify-content: center;
}

.number.number3 {
  justify-content: flex-end;
}

.number.number9 {
  justify-content: flex-start;
}

.number.number6 {
  align-items: flex-end;
}

.number.number12 {
  align-items: flex-start;
}

.number.number1 {
  --rotation_number: 1;
}
.number.number2 {
  --rotation_number: 2;
}
.number.number4 {
  --rotation_number: 4;
}
.number.number5 {
  --rotation_number: 5;
}
.number.number7 {
  --rotation_number: 7;
}
.number.number8 {
  --rotation_number: 8;
}
.number.number10 {
  --rotation_number: 10;
}
.number.number11 {
  --rotation_number: 11;
}

.clock::after {
  position: absolute;
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background-color: black;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  z-index: 11;
}

.clock .hand {
  --rotation: 30deg;
  position: absolute;
  background-color: rgb(255, 255, 255);
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(var(--rotation));
  transform-origin: bottom;
  border: 2px solid black;
  border-radius: 10px 10px 0 0;
}

.clock .hand.second {
  width: 0.1rem;
  height: 40%;
  z-index: 10;
}

.clock .hand.minute {
  width: 0.6rem;
  height: 35%;
  z-index: 9;
}

.clock .hand.hour {
  width: 0.6rem;
  height: 22%;
}

.clock .obj {
  --rotation: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  color: black;
  font-size: 1.2rem;
}

.clock .obj1 {
  --rotation: calc(6 * 1deg);
}
.clock .obj2 {
  --rotation: calc(6 * 2deg);
}
.clock .obj3 {
  --rotation: calc(6 * 3deg);
}
.clock .obj4 {
  --rotation: calc(6 * 4deg);
}
.clock .obj6 {
  --rotation: calc(6 * 6deg);
}
.clock .obj7 {
  --rotation: calc(6 * 7deg);
}
.clock .obj8 {
  --rotation: calc(6 * 8deg);
}
.clock .obj9 {
  --rotation: calc(6 * 9deg);
}
.clock .obj11 {
  --rotation: calc(6 * 11deg);
}
.clock .obj12 {
  --rotation: calc(6 * 12deg);
}
.clock .obj13 {
  --rotation: calc(6 * 13deg);
}
.clock .obj14 {
  --rotation: calc(6 * 14deg);
}
.clock .obj16 {
  --rotation: calc(6 * 16deg);
}
.clock .obj17 {
  --rotation: calc(6 * 17deg);
}
.clock .obj18 {
  --rotation: calc(6 * 18deg);
}
.clock .obj19 {
  --rotation: calc(6 * 19deg);
}
.clock .obj21 {
  --rotation: calc(6 * 21deg);
}
.clock .obj22 {
  --rotation: calc(6 * 22deg);
}
.clock .obj23 {
  --rotation: calc(6 * 23deg);
}
.clock .obj24 {
  --rotation: calc(6 * 24deg);
}
.clock .obj26 {
  --rotation: calc(6 * 26deg);
}
.clock .obj27 {
  --rotation: calc(6 * 27deg);
}
.clock .obj28 {
  --rotation: calc(6 * 28deg);
}
.clock .obj29 {
  --rotation: calc(6 * 29deg);
}
.clock .obj31 {
  --rotation: calc(6 * 31deg);
}
.clock .obj32 {
  --rotation: calc(6 * 32deg);
}
.clock .obj33 {
  --rotation: calc(6 * 33deg);
}
.clock .obj34 {
  --rotation: calc(6 * 34deg);
}
.clock .obj36 {
  --rotation: calc(6 * 36deg);
}
.clock .obj37 {
  --rotation: calc(6 * 37deg);
}
.clock .obj38 {
  --rotation: calc(6 * 38deg);
}
.clock .obj39 {
  --rotation: calc(6 * 39deg);
}
.clock .obj41 {
  --rotation: calc(6 * 41deg);
}
.clock .obj42 {
  --rotation: calc(6 * 42deg);
}
.clock .obj43 {
  --rotation: calc(6 * 43deg);
}
.clock .obj44 {
  --rotation: calc(6 * 44deg);
}
.clock .obj46 {
  --rotation: calc(6 * 46deg);
}
.clock .obj47 {
  --rotation: calc(6 * 47deg);
}
.clock .obj48 {
  --rotation: calc(6 * 48deg);
}
.clock .obj49 {
  --rotation: calc(6 * 49deg);
}
.clock .obj51 {
  --rotation: calc(6 * 51deg);
}
.clock .obj52 {
  --rotation: calc(6 * 52deg);
}
.clock .obj53 {
  --rotation: calc(6 * 53deg);
}
.clock .obj54 {
  --rotation: calc(6 * 54deg);
}
.clock .obj56 {
  --rotation: calc(6 * 56deg);
}
.clock .obj57 {
  --rotation: calc(6 * 57deg);
}
.clock .obj58 {
  --rotation: calc(6 * 58deg);
}
.clock .obj59 {
  --rotation: calc(6 * 59deg);
}