article {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em 3em;
}

#current {
    max-width: 50em;
}

#units {
    color: var(--text4);
    background: var(--bg4);
}

#calculator-header {
    padding-bottom: 0;
}

#calculator, #calculator-header {
    color: var(--text5);
    background: var(--bg5);
}

#why {
    color: var(--text4);
    background: var(--bg4);
}

section {
    padding: 0.5em;
    max-width: 35em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items:center;
}

.clock-circle {
    max-width: 25em;
}

th, td {
    padding: .5em;
    background-color: var(--bg5);
}

h2 {
    text-align: center;
}

svg {
    --bgcolor:    var(--bg4);
    --framecolor: var(--border);
    --indexcolor: var(--bg2);
    --handcolor:  var(--text1);
    --secondshandcolor: var(--bgRed);

    width: 100%;
}

.display {
    padding-bottom: 1em;
    text-align: center;
    font-family: monospace;
    font-size: 300%;
    color: var(--bg2);
}

.time-control {
    display: grid;
    grid-template-columns: 2em 2em 5em 2em 2em;
    gap: 0.8em;
    font-size: 130%;
    text-align: center;
    line-height: 180%;
}

button {
    height: 2em;
}

#decimal-clock {
    --start-decimal-hours: 0;
    --start-decimal-minutes: 0;
    --start-decimal-seconds: 0;
}

#clock {
    --start-hours: 0;
    --start-minutes: 0;
    --start-seconds: 0;
}

.clockface {
    stroke-width: 2;
    fill: var(--bgcolor);
    stroke: var(--framecolor);
}

.indizes > use {
    stroke: var(--indexcolor);
    stroke-width: 1;
    stroke-linecap: round;
}

#decimal-indizes > use:nth-child(2n+2) {
    stroke-width: 3;
}

#indizes > use:nth-child(3n+3) {
    stroke-width: 3;
}

.cipher {
    fill: var(--indexcolor);
}

.origin {
    fill: var(--secondshandcolor);
}

.hours {
    stroke: var(--handcolor);
    stroke-width: 4;
}

#decimal-hours {
    transform: rotate(calc(var(--start-decimal-hours) * 36deg + var(--start-decimal-minutes) * 0.36deg + var(--start-decimal-seconds) * 0.0036deg));
}

#hours {
    transform: rotate(calc(var(--start-hours) * 30deg + var(--start-minutes) * 0.5deg + var(--start-seconds) * 0.0083333333deg));
}

.minutes {
    stroke: var(--handcolor);
    stroke-width: 2;
}

#decimal-minutes {
    transform: rotate(calc(var(--start-decimal-minutes) * 3.6deg));
}

#minutes {
    transform: rotate(calc(var(--start-minutes) * 6deg));
}

.seconds {
    stroke: var(--secondshandcolor);
}

#decimal-seconds {
    transform: rotate(calc(var(--start-decimal-seconds) * 3.6deg));
}

#seconds {
    transform: rotate(calc(var(--start-seconds) * 6deg));
}

.digitalTime {
    font-family: monospace;
    font-size: 75%;
}