*{
  margin: 0;
  padding: 0;
  font-family: serif;
  color: white;
}
body{
  height: 100vh;
  width: 100vw;
  background-color: rgb(55, 59, 60);
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  position: relative;
}
.clock{
  height: 40cqb;
  width: 40cqb;
  background-color: rgb(26, 26, 26);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 8px rgb(159, 235, 239);
  display: flex;
  justify-content: center;
  align-items: center;
}
.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;
}
.clock::before{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  z-index: 2;
}
.hand{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hand i{
  position: absolute;
  width: 4px;
  height: var(--h);
  border-radius: 8px;
  background-color: var(--cls);
}