body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 4rem;
    color: rgb(49, 49, 49);
    background-color: rgb(245, 245, 245)
}

.time, .date {
    display: flex;
    gap: 0.3em;
    justify-content: center;
}

.clocks {
    width: 570px;
    height: 570px;
    margin: 0 auto;
    position: relative;

}
.clocks * {
    position: absolute;
}

.clock-face {
    width: 100%;
    height: 100%;
}

.hand-cover {
    width: 30px;
    left: 270px;
    top: 270px;
    z-index: 5;
}

.hour-hand {
    width: 20px;
    top: 76.12px;
    left: 275px;
    z-index: 2;
    
    transform-origin: bottom;
    transform: rotate(180deg);
}
.minute-hand {
    width: 10px;
    top: 62px;
    left: 280px;
    z-index: 3;

    transform-origin: bottom;
    transform: rotate(120deg);
}

.second-hand {
    width: 11.25px;
    top: 91px;
    left: 279.375px;
    z-index: 4;

    transform-origin: 50% 76%;
    transform: rotate(0deg);
}