html,body,#content{width:100%;height:100%}body{margin:0}#content{grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr 1fr;display:grid;position:relative;overflow:hidden}#clock{aspect-ratio:1;z-index:0;grid-area:1/1/3/-1;place-self:center;width:100%;height:100%}#clock.hidden{display:none}#second-hand,#minute-hand,#hour-hand{will-change:transform}#time-container{flex-direction:column;grid-area:2/1/auto/-1;justify-content:center;place-self:center;align-items:center;display:flex}#clock:not(.hidden)~#time-container{grid-row:3}#time{margin:0;font-family:monospace;font-size:15vw}#days{margin:0;font-family:sans-serif;font-size:10vw}#days:empty,#time.hidden{display:none}.status{z-index:1;grid-row:1;margin:8px;font-family:sans-serif}.status.hidden{display:none}#status-left{grid-column:1;justify-self:start}#status-right{text-align:right;grid-column:2;justify-self:end}#settings-dialog{color:#000;background-color:#fff;border:1px solid #ccc;border-radius:8px;padding:20px;font-family:sans-serif}#settings-dialog::backdrop{background:#00000080}#settings-dialog h2{margin-top:0}@media (prefers-color-scheme:dark){#settings-dialog{color:#fff;background-color:#333;border-color:#555}}#settings-dialog button{cursor:pointer;background-color:#eee;border:1px solid #ccc;border-radius:4px;margin-top:10px;padding:8px 16px}@media (prefers-color-scheme:dark){#settings-dialog button{color:#fff;background-color:#444;border-color:#666}}svg g.numerals text{text-anchor:middle;dominant-baseline:middle;stroke:none;font-family:sans-serif;font-size:10px}svg{fill:#000;stroke:#000}@media (prefers-color-scheme:dark){svg{fill:#fff;stroke:#fff}}