container{
    display: flex;
    align-items: center;
    justify-content: center;
}

/** **/

clock{
    --dim: 200px;
    
    display: block;
    position: relative;
    width: var(--dim);
    height: var(--dim);
    background: white;
    border: 5px solid #000;
    border-radius: 50%;
    font-family: Verdana;
}

numbers, ticks{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
}

number, tick{
    display: block;
    position: absolute;
    text-align: center;
}

number{
    transform: rotate(calc(var(--i) * 30deg));
    inset: 10px;
}

number i{
    display: block;
    transform: rotate(calc(var(--i) * -30deg));
    font-style: normal;
}

tick{
    transform: rotate(calc(var(--i) * 6deg));
    inset: 0px;
}

tick i{
    display: inline-block;
    width: 2px;
    height: 5px;
    background-color: #000;
}

tick:nth-child(5n) i{
    width: 5px;
    height: 10px;
}

/** HAND **/

hands{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

hand {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 2;
    width: var(--dim);
    height: var(--dim);
    opacity: .8;
}

hand i{
    display: inline-block;
    background-color: #000;
    border-radius: 3px;
}

.hour {
    --dim: calc(100% - 4.5 * 10px * 2);
}

.hour i {
    width: 5px;
    height: 60%;
}

.minute {
    --dim: calc(100% - 3 * 10px * 2);
}

.minute i {
    width: 5px;
    height: 58%;
}

.second {
    --dim: calc(100% - 10px *2);
    transition: none;
}

.second i {
    width: 5px;
    height: 65%;
    background-color: red;
}

/** **/

center{
    display: block;
    background-color: red;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 3;
}

time{
    display: block;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
}

date{
    display: block;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -70%);
}