body,html{background:#000;position:relative;height:100dvh;width:100dvw;align-items:center;overflow:hidden}@media (prefers-color-scheme: dark){body,html{filter:brightness(85%)}}body .Clock,html .Clock{position:absolute;height:100dvh;width:100dvw;display:flex;align-items:center;transition:opacity 2s ease-in-out}body .Clock .Digital,html .Clock .Digital{position:absolute;display:inline-block;height:100dvh;width:100dvw;color:#fff;text-align:center;line-height:100dvh}body .Clock .Digital .time,html .Clock .Digital .time{font-family:impact,sans-serif;font-size:42vw}body .Clock .Digital .time .colon,html .Clock .Digital .time .colon{transition:opacity .25s ease-in-out}body .Clock .Analog,html .Clock .Analog{position:relative;display:flex;margin:0 auto;align-items:center;justify-content:center;width:400px;height:400px;background:center no-repeat url(/clock.svg)}body .Clock .Analog:after,html .Clock .Analog:after{content:"";display:block;width:10px;height:10px;border-radius:50%;background:#fff;z-index:1;box-shadow:0 0 0 1px #00000080}body .Clock .Analog .hour,html .Clock .Analog .hour{position:absolute;bottom:50%;height:26%;width:10px;border-radius:5px 5px 0 0;background:#fff;box-shadow:0 0 0 1px #00000080;transition:transform .5s cubic-bezier(.4,1.3,.3,1);transform-origin:bottom center}body .Clock .Analog .minute,html .Clock .Analog .minute{position:absolute;bottom:50%;height:43%;width:10px;border-radius:5px 5px 0 0;background:#fff;box-shadow:0 0 0 1px #00000080;transition:transform .5s cubic-bezier(.4,1.3,.3,1);transform-origin:bottom center}body .Clock .Analog .second,html .Clock .Analog .second{position:absolute;bottom:50%;height:50%;width:2px;border-radius:5px 5px 0 0;background:orange;box-shadow:0 0 0 1px #00000080;transition:transform .5s cubic-bezier(.4,1.3,.3,1);transform-origin:bottom center}