*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    background-image: linear-gradient(to right, rgb(61, 61, 61), rgba(0, 0, 0, 0));
}
#heading{
    text-align: center;
    color: whitesmoke;
    font-size:50px;
    padding: 20px 0;
}
#container{
    text-align: center;
    position: relative;
    height: 85vh;
}
#clock{
    height: 70%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: block;
    border-radius: 50%;
}
#hrHand{
    background-color: whitesmoke;
    width: 0.4%;
    height: 17.88%;
    position: absolute;
    top: 17%;
    left: 49.8%;
    transform: rotate(0deg);
    transform-origin:bottom ;

    border-radius: 10px;
}
#minHand{
    background-color: whitesmoke;
    width: 0.3%;
    height: 24.4%;
    position: absolute;
    left: 49.89%;
    top: 10.5%;
    transform: rotate(0deg);
    transform-origin: bottom;
    
    border-radius: 10px;
}
#secHand{
    background-color: whitesmoke;
    width: 0.2%;
    height: 33%;
    position: absolute;
    left: 49.9%;
    top: 2%;
    transform: rotate(0deg);
    transform-origin: bottom;

    border-radius: 10px;
}