body{
    background-color:rgb(32, 29, 29)
}

h1{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 900;
    text-align: center;
    width: 240px;
    padding: 10px;
    margin: auto;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.756);
}
.clock{
    position:relative;
    height: 300px;
    width: 300px;
    background-color: white;
    box-shadow: grey 3px 3px 3px inset, grey 4px -4px 3px inset, grey -4px 4px 3px inset, grey -4px -4px 3px inset;
    border: 20px solid purple;
    border-radius: 50%;
    margin:auto;
    margin-top: 20px;
}
.time{
    font-size: 20px;
    font-family: sans-serif;
    
}
.axis{
    height: 30px;
    width: 30px;
    background-color: black;
    border-radius: 50%;
    position:absolute;
    top:136px;
    left:130px;
    position: relative;
    z-index: 2;
}
.minute_hand{
    position:absolute;
    top:28px;
    left:140px;
    height:120px;
    width: 8px;
    background-color: black;
    transform-origin: bottom;
}
.hour_hand{
    position:absolute;
    top:54px;
    left:140px;
    height:90px;
    width: 8px;
    background-color: rgb(163, 72, 72);
    transform-origin: bottom;
}
.sec_hand{
    position:absolute;
    top:45px;
    left:142px;
    height:100px;
    width: 5px;
    background-color: rgb(46, 49, 181);
    transform-origin: bottom;
}
#clock12{
    position:absolute;
    top:10px;
    left:135px;
}
#clock11{
    position:absolute;
    top:30px;
    left:80px;
}
#clock10{
    position:absolute;
    top:80px;
    left:40px;
}
#clock9{
    position:absolute;
    left:10px;
    top:135px;
}

#clock8{
    position:absolute;
    bottom:80px;
    left:40px;
}
#clock7{
    position:absolute;
    bottom:30px;
    left:80px;
}
#clock6{
    position:absolute;
    bottom:10px;
    left:135px;
}
#clock5{
    position:absolute;
    bottom:30px;
    right:80px;
}
#clock4{
    position:absolute;
    bottom:80px;
    right:40px;
}
#clock3{
    position:absolute;
    right:10px;
    top:135px;
}
#clock2{
    position:absolute;
    top:80px;
    right:40px;
}     
#clock1{
    position:absolute;
    top:30px;
    right:80px;
}
/* media quiry for small screen */
@media only screen and (max-width: 700px) and (min-width:100px) {
    .clock{height: 200px;width: 200px;}
    #clock1{top:20px;right:60px}
    #clock2{top:45px;right:30px}
    #clock3{top:85px;right:15px}
    #clock4{top:130px;right:20px}
    #clock5{top:155px;right:50px}
    #clock6{bottom:10px;left:100px}
    #clock7{top:155px;left:55px}
    #clock8{top:125px;left:35px}
    #clock9{top:85px;left:15px}
    #clock10{top:45px;left:30px}
    #clock11{top:20px;left:60px}
    #clock12{top:10px;left:90px}
    .axis{ height: 15px;width: 15px;top:90px;left:100px;}
    .minute_hand{top:30px;left:100px;height: 70px;width: 5px;}
    .hour_hand{top:40px;left:105px;height: 55px;width: 6px;}
    .sec_hand{top:10px;left:102px;height: 90px;width: 3px;}
    h1{font-size: 20px;width: max-content;margin: 70px auto;}

}