style.css

* {
    font-family: 'Fira Code', monospace;
}

body {
    width: 80em;
    margin: 0 auto;
    text-align: center;
}

h1 {
    text-align: center;
    font-size: 2.5em;
}

.title {
    margin: 1em;
    font-size: 4em;
}

.main {
    display: flex;
    justify-content: center;
    align-items: middle;
    margin: 8em;
    margin-top: 2em;
}

.clockbox,
#clock,
#clock3 {
    width: 24em;
    height: 20em;
}

.circle,
.hour-marks,
.hour-arm,
.minute-arm,
.second-arm {
    fill: none;
    stroke: #000;
}

.circle,
.hour-marks,
.hour-arm,
.minute-arm,
.second-arm {
    stroke-miterlimit: 10;
}

.circle,
.hour-marks {
    stroke-width: 5;
}

.hour-arm {
    stroke-width: 8;
}

.minute-arm {
    stroke-width: 6;
}

.second-arm {
    stroke-width: 4;
}

.mid-circle {
    fill: #000;
}

.sizing-box {
    fill: none;
}

#hour1,
#minute1,
#second1,
#hour2,
#minute2,
#second2,
#hour3,
#minute3,
#second3 {
    transform-origin: 300px 300px;
}