body{
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(144, 139, 139);
}
.clock {
  position: relative;
  width: 300px;              
  height: 300px;             
  border: 4px solid #333;     
  border-radius: 50%;        
  margin: 50px auto;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
}

.clock span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;               
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.clock span:nth-child(12){
    transform: translate(-50%,-50%)  translateY(-130px) rotate(0deg);
}

.clock span:nth-child(11){
    transform: translate(-50%,-50%) rotate(-30deg) translateY(-130px) rotate(30deg);
}

.clock span:nth-child(10){
    transform: translate(-50%,-50%) rotate(-60deg) translateY(-130px) rotate(60deg);
}

.clock span:nth-child(9){
    transform: translate(-50%,-50%) rotate(-90deg) translateY(-130px) rotate(90deg);
}

.clock span:nth-child(8){
    transform: translate(-50%,-50%) rotate(-120deg) translateY(-130px) rotate(120deg);
}

.clock span:nth-child(7){
    transform: translate(-50%,-50%) rotate(-150deg) translateY(-130px) rotate(150deg);
}

.clock span:nth-child(6){
    transform: translate(-50%,-50%) rotate(-180deg) translateY(-130px) rotate(180deg);
}

.clock span:nth-child(5){
    transform: translate(-50%,-50%) rotate(-210deg) translateY(-130px) rotate(210deg);
}

.clock span:nth-child(4){
    transform: translate(-50%,-50%) rotate(-240deg) translateY(-130px) rotate(240deg);
}

.clock span:nth-child(3){
    transform: translate(-50%,-50%) rotate(-270deg) translateY(-130px) rotate(270deg);
}

.clock span:nth-child(2){
    transform: translate(-50%,-50%) rotate(-300deg) translateY(-130px) rotate(300deg);
}

.clock span:nth-child(1){
    transform: translate(-50%,-50%) rotate(-330deg) translateY(-130px) rotate(330deg);
}

.second{
    width:70%;
    height: 2px;
    /* background-color:pink; */
    animation: second 60s steps(60) infinite;
    position: absolute;
    z-index: 3;
}

.sec{
    width: 50%;
    height: 100%;
    background-color: #333;
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}

@keyframes second{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.minute{
    width: 70%;
    height: 4px;
    position: absolute;
    animation:minute 3600s linear infinite;
    z-index: 2;
}
.min{
    width: 50%;
    height: 100%;
    background-color: #333;
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}

@keyframes minute{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.hour{
    width: 6px;
    height: 50%;
    position: absolute;
    animation: hour 43200s linear infinite;
    z-index: 1;
}
.hrs{
    width: 100%;
    height: 50%;
    background-color: #333;
     clip-path: polygon(50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0% 50%);
}

@keyframes hour{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.dot{
    width: 10px;
    height: 10px;
    background-color: grey;
    border-radius: 50%;
    z-index: 4;
}
.cmp{
    width: auto;
    transform: translateY(70px);
    position: absolute;
}