#clock-container{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center;margin:20px auto;width:100%}.date-year-display{color:var(--flip-date-color,var(--flip-divider-color));display:none;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:clamp(1rem,3vw,1.5rem);font-weight:400;letter-spacing:.05em;margin-bottom:0;margin-right:-.05em;margin-top:0;opacity:.8;text-align:center;width:100%}#clock-container.fullscreen-mode .date-year-display{bottom:25%;font-size:clamp(1.3rem,4vw,2rem);left:50%;margin-bottom:0;margin-top:0;position:absolute;transform:translateX(-50%);z-index:100}#clock-container:not(.fullscreen-mode) .flip-clock-container .clock{margin:0;transform:scale(.8)}#clock-container.fullscreen-mode{background-color:var(--flip-page-bg);height:100vh;margin:0;overflow:hidden;position:relative;width:100vw}#clock-container.fullscreen-mode .flip-clock-container{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(1.5)}#clock-container.fullscreen-mode .clock-controls{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;height:auto;justify-content:center;left:50%;margin:0;opacity:0;padding:10px;position:absolute;top:90%;transform:translateX(-50%) scale(.5);transition:opacity .5s ease;white-space:nowrap;width:auto;z-index:1000}#clock-container.fullscreen-mode.show-controls .clock-controls{opacity:.7}#clock-container.fullscreen-mode .clock-controls button{font-size:.7rem;padding:.5rem 1rem}#clock-container.fullscreen-mode .clock-controls:hover{opacity:1}#clock-container .clock{align-items:center;display:flex;justify-content:center;padding:0}#clock-container .clock .divider{color:var(--flip-divider-color);font-size:80px;font-style:normal;line-height:160px;margin:0 6px}#clock-container .clock .flip{background:var(--flip-card-bg);border:1px solid var(--flip-card-border);border-radius:6px;box-shadow:0 0 6px var(--flip-shadow);font-size:80px;font-weight:700;height:160px;line-height:157px;margin:5px;position:relative;text-align:center;width:130px}#clock-container .clock .flip .digital:after,#clock-container .clock .flip .digital:before{background:var(--flip-number-bg);color:var(--flip-number-text);content:attr(data-number);font-size:130px;left:0;overflow:hidden;-webkit-perspective:200px;perspective:200px;position:absolute;right:0}#clock-container .clock .flip .digital:before{border-bottom:1px solid var(--flip-divider-line-color,hsla(0,0%,100%,.03));border-radius:5px 5px 0 0;bottom:50%;top:0;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}#clock-container .clock .flip .digital:after{border-radius:0 0 5px 5px;bottom:0;line-height:0;top:50%;-webkit-transform-origin:50% 0;transform-origin:50% 0}#clock-container .clock .flip .digital.back:before,#clock-container .clock .flip .digital.front:after{z-index:1}#clock-container .clock .flip .digital.back:after{z-index:2}#clock-container .clock .flip .digital.front:before{z-index:3}#clock-container .clock .flip .digital.back:after{-webkit-transform:rotateX(.5turn);transform:rotateX(.5turn);-webkit-transform-origin:center top;transform-origin:center top}#clock-container .clock .flip.running .digital.front:before{-webkit-animation:frontFlipDown .6s ease-in-out;animation:frontFlipDown .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 -2px 6px hsla(0,0%,100%,.3);-webkit-transform-origin:center bottom;transform-origin:center bottom}#clock-container .clock .flip.running .digital.back:after{-webkit-animation:backFlipDown .6s ease-in-out;animation:backFlipDown .6s ease-in-out}@-webkit-keyframes frontFlipDown{to{-webkit-transform:rotateX(.5turn);transform:rotateX(.5turn)}}@keyframes frontFlipDown{to{-webkit-transform:rotateX(.5turn);transform:rotateX(.5turn)}}@-webkit-keyframes backFlipDown{to{-webkit-transform:rotateX(0);transform:rotateX(0)}}@keyframes backFlipDown{to{-webkit-transform:rotateX(0);transform:rotateX(0)}}[data-clock-template=pure-dark] #clock-container{--flip-page-bg:#000;--flip-card-bg:#000;--flip-card-border:#151515;--flip-number-bg:#151515;--flip-number-text:#fff;--flip-divider-color:#ccc;--flip-date-color:#fff;--flip-shadow:0 0 6px rgba(54,54,54,.5);--flip-divider-line-color:#333}[data-clock-template=dark] #clock-container{--flip-page-bg:#151515;--flip-card-bg:#000;--flip-card-border:#1c1c1c;--flip-number-bg:#1c1c1c;--flip-number-text:#ccc;--flip-divider-color:#323434;--flip-date-color:#ccc;--flip-shadow:0 0 5px rgba(0,0,0,.8);--flip-divider-line-color:hsla(0,0%,100%,.1)}[data-clock-template=light] #clock-container{--flip-page-bg:#fff;--flip-card-bg:#f8f9fa;--flip-card-border:#e5e5e5;--flip-number-bg:#e5e5e5;--flip-number-text:#333;--flip-divider-color:#666;--flip-date-color:#444;--flip-shadow:0 0 6px rgba(0,0,0,.15);--flip-divider-line-color:#ced4da}[data-clock-template=light] #clock-container .clock .flip .digital:before{border-bottom:1px solid #ced4da}[data-clock-template=green] #clock-container{--flip-page-bg:#10140f;--flip-card-bg:#1b1f1a;--flip-card-border:#2a342a;--flip-number-bg:#1b1f1a;--flip-number-text:#cceac4;--flip-divider-color:#cceac4;--flip-date-color:#cceac4;--flip-shadow:0 0 6px rgba(27,31,26,.5);--flip-divider-line-color:rgba(204,234,196,.2)}[data-clock-template=green] #clock-container .clock .flip .digital:before{border-bottom:1px solid rgba(204,234,196,.2)}[data-clock-template=flip-blue] #clock-container{--flip-page-bg:#131315;--flip-card-bg:#1b1c20;--flip-card-border:#2a2b30;--flip-number-bg:#1b1c20;--flip-number-text:#c6c9f5;--flip-divider-color:#c6c9f5;--flip-date-color:#c6c9f5;--flip-shadow:0 0 6px rgba(19,19,21,.5);--flip-divider-line-color:rgba(198,201,245,.2)}[data-clock-template=flip-blue] #clock-container .clock .flip .digital:before{border-bottom:1px solid rgba(198,201,245,.2)}[data-clock-template=flip-red] #clock-container{--flip-page-bg:#1a1616;--flip-card-bg:#261e1e;--flip-card-border:#3a2e2e;--flip-number-bg:#261e1e;--flip-number-text:#dd6d6a;--flip-divider-color:#dd6d6a;--flip-date-color:#dd6d6a;--flip-shadow:0 0 6px hsla(0,8%,9%,.5);--flip-divider-line-color:hsla(2,63%,64%,.2)}[data-clock-template=flip-red] #clock-container .clock .flip .digital:before{border-bottom:1px solid hsla(2,63%,64%,.2)}[data-clock-template=flip-orange] #clock-container{--flip-page-bg:#15120b;--flip-card-bg:#211e18;--flip-card-border:#2f2c28;--flip-number-bg:#211e18;--flip-number-text:#f2ae55;--flip-divider-color:#f2ae55;--flip-date-color:#f2ae55;--flip-shadow:0 0 6px rgba(21,18,11,.5);--flip-divider-line-color:rgba(242,174,85,.2)}[data-clock-template=flip-orange] #clock-container .clock .flip .digital:before{border-bottom:1px solid rgba(242,174,85,.2)}[data-clock-template=flip-yellow] #clock-container{--flip-page-bg:#0d0f11;--flip-card-bg:#14161a;--flip-card-border:#24262a;--flip-number-bg:#14161a;--flip-number-text:#f8d568;--flip-divider-color:#f8d568;--flip-date-color:#f8d568;--flip-shadow:0 0 6px rgba(13,15,17,.5);--flip-divider-line-color:hsla(45,91%,69%,.2)}[data-clock-template=flip-yellow] #clock-container .clock .flip .digital:before{border-bottom:1px solid hsla(45,91%,69%,.2)}[data-clock-template=flip-purple] #clock-container{--flip-page-bg:#19171c;--flip-card-bg:#211d23;--flip-card-border:#312d33;--flip-number-bg:#211d23;--flip-number-text:#dfcfeb;--flip-divider-color:#dfcfeb;--flip-date-color:#dfcfeb;--flip-shadow:0 0 6px rgba(25,23,28,.5);--flip-divider-line-color:rgba(223,207,235,.2)}[data-clock-template=flip-purple] #clock-container .clock .flip .digital:before{border-bottom:1px solid rgba(223,207,235,.2)}[data-clock-template=flip-pink] #clock-container{--flip-page-bg:#f9e0ea;--flip-card-bg:#f0c1ce;--flip-card-border:#e6b1be;--flip-number-bg:#f0c1ce;--flip-number-text:#fff;--flip-divider-color:#fff;--flip-date-color:#a65b75;--flip-shadow:0 0 6px rgba(240,193,206,.3);--flip-divider-line-color:hsla(0,0%,100%,.3)}[data-clock-template=flip-pink] #clock-container .clock .flip .digital:before{border-bottom:1px solid hsla(0,0%,100%,.3)}[data-clock-template=pure-dark] body{background-color:#000}[data-clock-template=dark] body{background-color:#151515}[data-clock-template=light] body{background-color:#fff}[data-clock-template=green] body{background-color:#10140f}[data-clock-template=flip-blue] body{background-color:#131315}[data-clock-template=flip-red] body{background-color:#1a1616}[data-clock-template=flip-orange] body{background-color:#15120b}[data-clock-template=flip-yellow] body{background-color:#0d0f11}[data-clock-template=flip-purple] body{background-color:#19171c}[data-clock-template=flip-pink] body{background-color:#f9e0ea}[data-clock-template=pure-dark]{--page-bg:#000;--page-text:#fff;--page-text-secondary:#ccc;--page-border:#333;--nav-bg:rgba(0,0,0,.95);--footer-bg:#000}[data-clock-template=dark]{--page-bg:#151515;--page-text:#f2f2f2;--page-text-secondary:#ccc;--page-border:#444;--nav-bg:hsla(0,0%,8%,.95);--footer-bg:#151515}[data-clock-template=light]{--page-bg:#fff;--page-text:#111;--page-text-secondary:#666;--page-border:#e0e0e0;--nav-bg:hsla(0,0%,100%,.95);--footer-bg:#fff}[data-clock-template=green]{--page-bg:#10140f;--page-text:#cceac4;--page-text-secondary:#a8d5a8;--page-border:#2a342a;--nav-bg:rgba(16,20,15,.95);--footer-bg:#10140f}[data-clock-template=flip-blue]{--page-bg:#131315;--page-text:#c6c9f5;--page-text-secondary:#9fa2d9;--page-border:#2a2b30;--nav-bg:rgba(19,19,21,.95);--footer-bg:#131315}[data-clock-template=flip-red]{--page-bg:#1a1616;--page-text:#dd6d6a;--page-text-secondary:#b85855;--page-border:#3a2e2e;--nav-bg:hsla(0,8%,9%,.95);--footer-bg:#1a1616}[data-clock-template=flip-orange]{--page-bg:#15120b;--page-text:#f2ae55;--page-text-secondary:#d4944a;--page-border:#2f2c28;--nav-bg:rgba(21,18,11,.95);--footer-bg:#15120b}[data-clock-template=flip-yellow]{--page-bg:#0d0f11;--page-text:#f8d568;--page-text-secondary:#d9ba5a;--page-border:#24262a;--nav-bg:rgba(13,15,17,.95);--footer-bg:#0d0f11}[data-clock-template=flip-purple]{--page-bg:#19171c;--page-text:#dfcfeb;--page-text-secondary:#c4b5d1;--page-border:#312d33;--nav-bg:rgba(25,23,28,.95);--footer-bg:#19171c}[data-clock-template=flip-pink]{--page-bg:#f9e0ea;--page-text:#8b3a5c;--page-text-secondary:#a65b75;--page-border:#e6b1be;--nav-bg:rgba(249,224,234,.95);--footer-bg:#f9e0ea}@media screen and (min-width:768px) and (max-width:1600px){#clock-container.fullscreen-mode .flip-clock-container{transform:translate(-50%,-50%) scale(1.3)}}@media screen and (max-width:767px){.date-year-display{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:clamp(.9rem,2.5vw,1.2rem);margin-bottom:20px}#clock-container.fullscreen-mode .date-year-display{bottom:20%;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:clamp(1.8rem,6vw,3rem)}#clock-container .clock .flip{font-size:42px;height:80px;line-height:80px;margin:2px;width:50px}#clock-container .clock .flip .digital:after,#clock-container .clock .flip .digital:before{font-size:42px}#clock-container .clock .divider{font-size:32px;line-height:80px;margin:0 5px}#clock-container:not(.fullscreen-mode) .flip-clock-container .clock{margin:0;transform:scale(1)}#clock-container.fullscreen-mode .flip-clock-container{transform:translate(-50%,-50%) scale(2)}}