.clock{position:absolute;top:24px;left:522px;z-index:9;--_w: 80cqi;--_r: calc((var(--_w) - var(--_sz)) / 2);--_sz: 12cqi;block-size:var(--_ow);border-radius:24%;container-type:inline-size;display:grid;font-family:ui-sans-serif, system-ui, sans-serif;margin-inline:auto;place-content:center;transform:rotate(15deg);width:50px;height:50px;animation:3s swing 1.5s ease infinite}@keyframes swing{5%{transform:rotate(15deg)}10%{transform:rotate(-10deg)}15%{transform:rotate(5deg)}20%{transform:rotate(-5deg)}25%{transform:rotate(0)}35%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}45%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}55%{transform:rotate(0)}100%{transform:rotate(0)}}.clock-face{aspect-ratio:1;border-radius:50%;block-size:var(--_w);font-size:6cqi;font-weight:700;list-style-type:none;inline-size:var(--_w);padding:unset;position:relative}.clock-face time{--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));display:grid;height:var(--_sz);left:var(--_x);place-content:center;position:absolute;top:var(--_y);width:var(--_sz);display:none}.clock-face time:nth-child(1){--_d: 270deg}.clock-face time:nth-child(2){--_d: 300deg}.clock-face time:nth-child(3){--_d: 330deg}.clock-face time:nth-child(4){--_d: 0deg}.clock-face time:nth-child(5){--_d: 30deg}.clock-face time:nth-child(6){--_d: 60deg}.clock-face time:nth-child(7){--_d: 90deg}.clock-face time:nth-child(8){--_d: 120deg}.clock-face time:nth-child(9){--_d: 150deg}.clock-face time:nth-child(10){--_d: 180deg}.clock-face time:nth-child(11){--_d: 210deg}.clock-face time:nth-child(12){--_d: 240deg}.arm{background-color:var(--_abg);border-radius:calc(var(--_aw) * 2);display:block;height:var(--_ah);left:calc((var(--_w) - var(--_aw)) / 2);position:absolute;top:calc((var(--_w) / 2) - var(--_ah));transform:rotate(0deg);transform-origin:bottom;width:var(--_aw)}.seconds{--_abg: #f0533c;--_ah: 30cqi;--_aw: 1cqi;animation:turn 60s linear infinite;animation-delay:var(--_ds, 0ms)}.minutes{--_abg: #fff;--_ah: 25cqi;--_aw: 2.5cqi;animation:turn 3600s steps(60, end) infinite;animation-delay:var(--_dm, 0ms)}.hours{--_abg: #fff;--_ah: 20cqi;--_aw: 2.5cqi;animation:turn 43200s linear infinite;animation-delay:var(--_dh, 0ms);position:relative}.hours::before{background-color:#fff;border:1cqi solid #333;border-radius:50%;content:"";display:block;height:4cqi;position:absolute;bottom:-3cqi;left:-1.75cqi;width:4cqi}@keyframes turn{to{transform:rotate(1turn)}}@supports not (left: calc(1px * cos(45deg))){time{left:50% !important;top:50% !important;transform:translate(-50%, -50%) rotate(var(--_d)) translate(var(--_r)) rotate(calc(-1*var(--_d)))}p{display:block}}