body{background-color:#dcdbd2;color:#267616;transition:all .3s ease;display:grid;height:100vh;place-items:center;margin:0;overflow:hidden}@media (prefers-color-scheme: dark){body{background-color:#101720;color:#b4ea2c}}.time{display:flex;flex-wrap:nowrap}.clock{--clock-width: min(20px, 100vw / (4 * 8)) ;position:relative;width:var(--clock-width);height:var(--clock-width)}.hand{position:absolute;transform-origin:left center;top:50%;right:0;width:50%;border:1px solid currentColor}.clocks{display:inline-grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr)}