*{
  margin: 0;
  padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  
  .clock {
    position: relative;
    width: 200px;
    height: 200px;
    border: 5px solid #333;
    border-radius: 50%;
  }
  
  .hour-hand,
  .minute-hand,
  .second-hand {
    position: absolute;
    transform-origin: center bottom;
  }
  
  .hour-hand {
    width: 6px;
    height: 60px;
    background-color: #333;
    top: calc(50% - 60px);
    left: calc(50% - 3px);
    transform: rotate(0deg);
  }
  
  .minute-hand {
    width: 4px;
    height: 80px;
    background-color: #666;
    top: calc(50% - 80px);
    left: calc(50% - 2px);
    transform: rotate(0deg);
  }
  
  .second-hand {
    width: 2px;
    height: 90px;
    background-color: #ff3333;
    top: calc(50% - 90px);
    left: calc(50% - 1px);
    transform: rotate(0deg);
  }
  
  .center-circle {
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
  }
  
  .clock span{
    position: absolute;
    transform: rotate(calc(30deg * var(--i))); 
    inset: 12px;
    text-align: center;
}

.clock span b{
    transform: rotate(calc(-30deg * var(--i)));
    display: inline-block;
    font-size: 20px;
}