* 
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clock 
{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #fff3e0;
  border-radius: 50%;
  border: 10px solid #ffccbc;
}


.clock-middle-dot
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #8d6e63;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.clock-mark 
{
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  background-color: #bcaaa4;
  border-radius: 50%;
  transform-origin: center center;
  transform: translate(-50%,-50%) rotate(calc(var(--index) * 30deg)) translate(0px, 120px)
}

.clock-min-hand
{
  position: absolute;
  background-color: #a1887f;
  bottom: 50%;
  left: 50%;
  width: 7px;
  height: 100px;
  border-radius: 10px 10px 0 0;
  transform-origin: bottom center;
  transform: translate(-50%, 0%) rotate(0deg);
}

.clock-hour-hand
{
  position: absolute;
  background-color: #795548;
  bottom: 50%;
  left: 50%;
  width: 7px;
  height: 70px;
  border-radius: 10px 10px 0 0;
  transform-origin: bottom center;
  transform: translate(-50%, 0%) rotate(0deg);
}


.clock-mark:nth-child(1)  { --index: 0 }
.clock-mark:nth-child(2)  { --index: 1 }
.clock-mark:nth-child(3)  { --index: 2 }
.clock-mark:nth-child(4)  { --index: 3 }
.clock-mark:nth-child(5)  { --index: 4 }
.clock-mark:nth-child(6)  { --index: 5 }
.clock-mark:nth-child(7)  { --index: 6 }
.clock-mark:nth-child(8)  { --index: 7 }
.clock-mark:nth-child(9)  { --index: 8 }
.clock-mark:nth-child(10) { --index: 9 }
.clock-mark:nth-child(11) { --index: 10 }
.clock-mark:nth-child(12) { --index: 11 }