*{
    margin: 0;
    padding: 0;
}
body{
    display:flex;
    height:100vh;
    justify-content:center;
    align-items:center;
    background:#10101E;
    color:white;
}
.clock{
    color:#fff;
    background: #c8e999 url(clock.png);
    background-size: cover;
    border:20px solid #c8e999;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 340px;
    height: 340px;
    -webkit-box-reflect: below 1px linear-gradient(transparent,rgba(255,255,255,0.1));
    box-shadow: inset 0 0 30px rgba(0,0,0,.3);
}

.clock::before{
    content:'';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #0a0a0a;
    border: 2px solid #91B461;
    z-index: 100000;
    border-radius: 50%;
}

.hour,.min,.sec{
    position: absolute;
}
.hour,.hr{
    width: 160px;
    height: 160px;
}

.minutes,.min{
    width: 190px;
    height: 190px;
}
.sec,.sc{
    width: 270px;
    height: 270px;
}

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

.hr::before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: #10101E;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}

.min::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 100px;
    background: #10101E;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}

.sc::before{
    content: '';
    position: absolute;
    width: 3px;
    height: 170px;
    background: #c45635;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}