*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(67 165 102);
}
body{
    display: flex;/*making content centered*/
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color:blueviolet;
}
.container{
    position: relative;
}
.clock{
    height: 440px;
    width: 440px;
    border-radius: 50%;
    border: 3px solid black;
    box-shadow: 0px 0px 40px blue;
    background-color: #4d4d56;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.clock span{
    position: absolute;
    transform: rotate(calc(30deg*var(--i)));
    inset: 12px;
    text-align: center;
    
}
.clock b{
    font-size: 35px;
    transform: rotate(calc(-30deg * var(--i)));
    display: inline-block;
}
.clock::before{
    content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: white;
    z-index: 2;
    border: 5px solid rgb(49, 40, 40);
}
.hand{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
#hrs i{
    height: 100px;
    width: 10px;
}
#mins i{
    
    height: 135px;
    width: 7px;
}
#secs i{
    
    height: 170px;
    width: 3px;
}
.hand i{
    position: absolute;
    background-color: rgb(22, 5, 5);
    border-radius: 5px;
}
@media (max-width:900px) {
    .clock{
        height: 300px;
        width: 300px;
    }
    .clock b{
        font-size: 28px;
    }
    #hrs i{
        height: 50px;
        width: 8px;
    }
    #mins i{
        
        height: 80px;
        width: 5px;
    }
    #secs i{
        
        height: 110px;
        width: 2px;
    }
}
@media (max-width:500px) {
    .clock{
        height: 220px;
        width: 220px;
    }
    .clock b{
        font-size: 24px;
    }
    #hrs i{
        height: 32px;
        width: 6px;
    }
    #mins i{
        
        height: 55px;
        width: 4px;
    }
    #secs i{
        
        height: 75px;
        width: 2px;
    }
}