#flip-clock{position:relative;flex-direction:column}#flip-clock,#flip-clock>div{display:flex;gap:32px}#flip-clock>div#day-full div:last-child,#flip-clock>div#day-name>div{flex:1 1}#flip-clock>div:not(#time){font-size:32px}#flip-clock>div:not(#time) span{font-size:144px;text-transform:capitalize}#flip-clock>#time>div{flex:1 1}.flip-clock-unit{position:relative;--offset:1px;--duration:0.5s;--border-radius:16px}.flip-clock-unit span{font-family:JetBrains Mono;font-weight:700;font-size:256px;display:flex;align-items:flex-start;padding:24px 16px;box-sizing:border-box;line-height:1;width:100%;justify-content:center}.flip-clock-unit .current{color:transparent;-webkit-user-select:text;-moz-user-select:text;user-select:text;z-index:2;position:relative}.flip-clock-unit .panels{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;perspective:24cm}.flip-clock-unit .panels>div{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;overflow:hidden}.flip-clock-unit .panels>div span{border-radius:var(--border-radius) var(--border-radius) 0 0;height:calc(50% - var(--offset));overflow:hidden;position:absolute;background-color:var(--flip-background);color:var(--flip-text-color);border:1px solid var(--flip-border-color)}.flip-clock-unit .panels>div span:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--flip-shadow-color);opacity:0}.flip-clock-unit .panels>div.flipper{transform-origin:center center}.flip-clock-unit .panels>div.flipper .rotate{transform:rotateX(180deg);align-items:flex-end;border-radius:0 0 var(--border-radius) var(--border-radius)}.flip-clock-unit .panels>div.bottom span{border-radius:0 0 var(--border-radius) var(--border-radius);top:calc(50% + var(--offset));align-items:flex-end}.flip-clock-unit .panels.flipping .top span:after{animation:shadow-top var(--duration) linear forwards}.flip-clock-unit .panels.flipping .bottom span:after{animation:shadow-bottom var(--duration) linear forwards}.flip-clock-unit .panels.flipping .flipper{animation:flip var(--duration) linear forwards}.flip-clock-unit .panels.flipping .flipper span:after{animation:shadow-flipper var(--duration) linear forwards}@keyframes flip{0%{transform:rotateX(0)}to{transform:rotateX(-180deg)}}@keyframes shadow-top{0%{opacity:.2}50%{opacity:0}to{opacity:0}}@keyframes shadow-flipper{0%{opacity:0}50%{opacity:.5}to{opacity:0}}@keyframes shadow-bottom{0%{opacity:0}50%{opacity:0}to{opacity:1}}