*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

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

.clock{
    width:350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    background-image: url("../images/clock.png");
    background-size: cover;
    border-radius: 50%;
    border:2px solid #fff;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.1),
                0 20px 20px rgba(0,0,0,0.2),
                0 0 0 4px rgba(255,255,255,1);
}

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

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

.hour, .hr{
    width:160px;
    height: 160px;
}

.min, .mn{
    width:190px;
    height:190px;
}

.sec, .sc{
    width: 230px;
    height: 230px;
}

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

.hr::before{
    content: '';
    position: absolute;
    width:8px;
    height: 80px;
    background: #848484;
    z-index: 10;
    top:0;
}

.mn::before{
    content: '';
    position: absolute;
    width:4px;
    height: 90px;
    background: #d6d6d6;
    z-index: 11;
    top:0;
}

.sc::before{
    content: '';
    position: absolute;
    width:2px;
    height: 155px;
    background: #ff6767;
    z-index: 12;
    top:0;
}