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

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: ;
}

.clock{
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(clock4.png),
    url(dbelenets.png),
    radial-gradient(circle, rgb(37, 73, 90) 0%, rgb(25, 48, 60) 11%, rgba(250,250,250,0)38%);
    background-size: cover;
    border-radius: 50%;
    box-shadow: 1 -15px 15px rgba(),
    inset 0 -15px 15px ,
    0 15px 15px rgba(),
    inset 0 15px 15px 
    ;
}

.clock:before{
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 999;
}

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

.clock .hour, .hr{
    width: 160px;
    height: 160px;
}
.clock .min, .mn{
    width: 190px;
    height: 190px;
}
.clock .sec, .sc{
    width: 230px;
    height: 230px;
}

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

.hr:before{
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    background: url(st_hr2.png) no-repeat;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
.mn:before{
    content: '';
    position: absolute;
    width: 190px;
    height: 190px;
    background: url(st_min2.png) no-repeat;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}
.sc:before{
    content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    background: url(st_sek2.png) no-repeat;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}