:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{background-image:url(/image/cyrene.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed}body{margin:0;padding:0;min-width:320px;min-height:100vh;display:flex;place-items:center;place-content:center}.clock-container{width:55rem;height:55rem;position:relative;display:flex;align-items:center;justify-self:center;margin:2rem auto 1rem}.clock-pointer{width:100%;height:100%;position:relative}.point,.hour-hand,.minute-hand,.second-hand{left:50%;bottom:50%;position:absolute;transform-origin:bottom center}.point{width:25px;height:25px;background-image:linear-gradient(to top,#320f55,#571996,#7822ce,#932df8);border-radius:50%;transform:translate(-50%,50%);z-index:4}.hour-hand{width:10px;height:230px;background-image:linear-gradient(to top,#320f55,#571996,#7822ce,#932df8);border-radius:10px;transform:translate(-50%) rotate(calc(var(--clock-hour-rotation) * 1deg));z-index:3}.minute-hand{width:10px;height:350px;background-image:linear-gradient(to top,#550f51,#921996,#ce22a3,#f82dcc);border-radius:10px;transform:translate(-50%) rotate(calc(var(--clock-minute-rotation) * 1deg));z-index:2}.second-hand{width:5px;height:380px;background-image:linear-gradient(to top,#550f0f,#961919,#ce2222,#f82d2d);border-radius:10px;transform:translate(-50%) rotate(calc(var(--clock-second-rotation) * 1deg));z-index:1}.clock{top:0;left:0;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 3px gold;overflow:hidden;position:absolute;transform:rotate(15deg)}.hour-segment{width:50%;height:50%;display:flex;align-items:flex-start;justify-content:flex-end;position:absolute;transform:rotate(calc(30deg * var(--i)));transform-origin:bottom right;-webkit-user-select:none;user-select:none}.hour-segment:before{content:"";inset:0;position:absolute;background-image:var(--img);opacity:.8;background-position:center;background-repeat:no-repeat;background-size:cover;clip-path:polygon(100% 100%,100% 0,42.3% 0)}.hour-segment span{top:5%;right:20%;color:#fed3ee;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:white;font-family:Pacifico,cursive;font-size:36px;font-weight:700;pointer-events:none;position:relative;transform:rotate(calc(var(--deg) * var(--i) * 1deg))}.date-time{width:55rem;height:30rem;position:relative;display:block;align-items:center;margin-top:2rem}.time-container{width:100%;height:70%;background-image:url(/image/cyrene-bg.png);background-position:center;background-repeat:no-repeat;background-size:80%;position:relative;display:flex;align-items:center;justify-content:center}.time-container span,.date-container span,.number-container span{background-image:url(/image/time-bg.jpg);background-clip:text;background-position:center;background-repeat:no-repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-family:Roboto Mono,monospace;font-size:64px;font-weight:700;text-align:center;-webkit-user-select:none;user-select:none}.digit-container{height:60px;width:40px;display:inline-block;position:relative;overflow:hidden}.digit-column{display:flex;flex-direction:column;transform:translateY(calc(var(--digit) * -60px));transition:transform .6s cubic-bezier(.68,-.55,.265,1.55)}.digit{height:60px;line-height:60px}.date-container,.number-container{width:100%;height:10%;position:relative;display:flex;align-items:flex-start;justify-content:center}.date-container span,.number-container span{font-size:32px}.number-container .digit-container{width:20px}.number-container span{height:60px;line-height:60px}