* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}





   


.clock {
    width: 47%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../Media_IMG/clock3.png);
    background-color: #082e40;
    background-size: contain;
    background-repeat:no-repeat;
    background-position:center;
    border: 3px;
    /* box-shadow: 15px 15px 15px red; */
    box-shadow: 0em -1.2em 1.2em rgba(255, 255, 255, 0.06), inset 0em -1.2em 1em rgba(255, 255, 255, 0.06), 0em 1.2em 1.2em rgba(0, 0, 0, 0.3), inset 0em 1.2em 1.2em rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}







/* The small circle int the center */
.clock:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 15px;
    background: rgb(255, 255, 255);
    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; */

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

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

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


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


    .hr:before {
        content: '';
        position: absolute;
        width: 5.5px;
        height: 60px;
        background: #f69938;
        z-index: 10;
        /* z-index least */
        border-radius: 2.8px;
    }

    .mn:before {
        content: '';
        position: absolute;
        width: 3.5px;
        height: 80px;
        background: #ffffff;
        z-index: 11;
        /* z-index more than hour hand */
        border-radius: 3px;
    }



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


@media all and (display-mode: fullscreen) {
    .clock {
      width: 50%;
    height:100%;
      background-size: cover;
    }

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

    }