index.css

:root {
    --clock-width: 300px;
    --clock-offset-top: 100px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: #FFF8E7;
}

body>* {
    position: absolute;
}

#clock {
    border-radius: 50%;
    background: 50% 45%/ 100px no-repeat url('fuduli.ico');
    border: 1px solid black;
    width: var(--clock-width);
    height: var(--clock-width);
    left: calc(50vw - var(--clock-width)/2);
    top: var(--clock-offset-top);
}

.clock-num {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center left;
}

.clock-num>div {
    position: absolute;
    transform-origin: center left;
}

.clock-graduation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center left;
}

.clock-graduation>div {
    width: 1px;
    height: 7px;
    background: black;
}

.hand {
    position: absolute;
    transform-origin: center left;
}

#hour-hand {
    width: 40px;
    height: 6px;
    background-color: #0096FF;
}

#minute-hand {
    width: 80px;
    height: 4px;
    background-color: black;
}

#second-hand {
    width: 120px;
    height: 2px;
    background-color: rgba(255, 0, 0, 0.5);
}

#date-display {
    top: calc(var(--clock-offset-top) + var(--clock-width) + 1rem);
    left: calc(50vw - var(--clock-width)/2);
    width: var(--clock-width);
    text-align: center;
}

#timezone-section {
    top: calc(var(--clock-offset-top) + var(--clock-width) + 4rem);
    left: calc(50vw - var(--clock-width)/2);
}

#locale-section {
    top: calc(var(--clock-offset-top) + var(--clock-width) + 6rem);
    left: calc(50vw - var(--clock-width)/2);
}

#locale-select {
    margin-left: 1.5rem;
}

#timezone-section, #locale-section {
    width: var(--clock-width);
    display: flex;
}

#timezone-section>select, #locale-section>select {
    width: 73%;
}

#timezone-section>label, #locale-section>label {
    display: inline-block;
    margin-right: calc(2 * var(--clock-width) / 100);
}