.clock {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(takvim-saat-b.png);
    background-size: cover;
    /*    border: 4px;*/
    /* box-shadow: 15px 15px 15px rgba(255, 255, 255, 0.5); */
    /*    box-shadow: 0em -1.2em 1.2em rgba(255, 255, 255, 0.3), inset 1em 1em -1em rgba(255, 255, 255, 0.3), 0em -1.2em -1.2em rgba(0, 0, 0, 0.5), inset 1em -1em 1em rgba(0, 0, 0, 0.1);*/
    /*    border-radius: 50%;*/
}



    .clock :hover {
        /* yet to be completed; when hovered, diplay complete information about time, `new Date().toLocaleString();` */
        /*    cursor: pointer;*/
    }



    /* The small circle int the center */
    .clock:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 4px;
        background: #404040;
        border-radius: 50%;
        /* The z-index property specifies the stack order of an element.
    /* An element with greater stack order is always in front of an element with a lower stack order.  */
        /* Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). */
            z-index: 10000;
        /* kept as a high value, since wanted at top */
    }



    .clock .hour,
    .clock .min,
    .clock .sec {
        position: absolute;
    }

    /* length of respective arms; */
    .clock .hour, .hr {
        width: 28px;
        height: 28px;
    }

    .clock .min, .mn {
        width: 40px;
        height: 40px;
    }

    .clock .sec, .sc {
        width: 50px;
        height: 50px;
    }


.hr, .mn, .sc {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    position: absolute;
    border-radius: 50%;
}


    .hr:before {
        content: '';
        position: absolute;
        width: 2px;
        height: 15px;
        background: #404040;
        z-index: 10;
        /* z-index least */
        border-radius: 1px;
    }

    .mn:before {
        content: '';
        position: absolute;
        width: 1.5px;
        height: 20px;
        background: #404040;
        z-index: 11;
        /* z-index more than hour hand */
        border-radius: 1px;
    }




    .sc:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 25px;
        background: #404040;
        z-index: 12;
        /* z-index more than hour minute hand */
        border-radius: 1px;
    }