@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
*{
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(#0ed0d6 , #79d60e);
}
.clock{
    width: 350px;
    height: 350px;
    position: relative;
    background: #FFF url('analog.png');
    border-radius: 50%;
    box-shadow: inset 0 0 15px #2e5502;
}
.clock::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 15px;
    height: 15px;
    background: #333333;
    border-radius: 50%;
    z-index: 999;
}
.hour, .minute, .seconds{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.hour, .hr{
    width: 160px;
    height: 160px;
}
.minute, .min{
    width: 200px;
    height: 200px;
}
.seconds, .sec{
    width: 230px;
    height: 230px;
}
.hr,.min,.sec{
    display: flex;
    justify-content: center;
    position: absolute;
}
.hr::before{
    content: "";
    position: absolute;
    width: 9px;
    height: 100px;
    background-color: #777777;
    border-radius: 6px 6px 0 0;
}
.min::before{
    content: "";
    position: absolute;
    width: 4px;
    height: 95px;
    background-color: #777777;
    border-radius: 6px 6px 0 0;
}
.sec::before{
    content: "";
    position: absolute;
    width: 3px;
    height: 160px;
    background-color: #0665f3;
    border-radius: 6px 6px 0 0;
}
