.flip-container{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#222;overflow:hidden}
.flip-clock{display:flex;align-items:center;gap:1.5vmin}
.flip-group{display:flex;gap:1.5vmin}
.colon{font-size:18vmin;color:#ccc;font-weight:300;line-height:24vmin;margin-top:-2vmin;padding:0 1vmin}
.flip-digit{width:20vmin;height:28vmin;position:relative;perspective:800px;border-radius:1.5vmin;box-shadow:0 1vmin 3vmin rgba(0,0,0,.5)}
.flip-back-top{position:absolute;left:0;top:0;width:100%;height:50%;overflow:hidden;background:#333;border-radius:1.5vmin 1.5vmin 0 0;border-bottom:2px solid #000;z-index:1}
.flip-back-top span{display:block;font-size:22vmin;font-weight:700;color:#ccc;text-align:center;line-height:28vmin}
.flip-back-bottom{position:absolute;left:0;bottom:0;width:100%;height:50%;overflow:hidden;background:#333;border-radius:0 0 1.5vmin 1.5vmin;border-top:2px solid #000;z-index:1}
.flip-back-bottom span{display:block;font-size:22vmin;font-weight:700;color:#ccc;text-align:center;line-height:28vmin;margin-top:-14vmin}
.flip-front-top{position:absolute;left:0;top:0;width:100%;height:50%;overflow:hidden;background:#333;border-radius:1.5vmin 1.5vmin 0 0;border-bottom:2px solid #000;z-index:3;transform-origin:bottom;transform:rotateX(-90deg);opacity:0;backface-visibility:hidden}
.flip-front-top span{display:block;font-size:22vmin;font-weight:700;color:#ccc;text-align:center;line-height:28vmin}
.flip-front-bottom{position:absolute;left:0;bottom:0;width:100%;height:50%;overflow:hidden;background:#333;border-radius:0 0 1.5vmin 1.5vmin;border-top:2px solid #000;z-index:3;transform-origin:top;transform:rotateX(90deg);opacity:0;backface-visibility:hidden}
.flip-front-bottom span{display:block;font-size:22vmin;font-weight:700;color:#ccc;text-align:center;line-height:28vmin;margin-top:-14vmin}
.flip-digit.flipping .flip-front-top{animation:ftd 0.6s ease-in-out forwards;opacity:1}
.flip-digit.flipping .flip-front-bottom{animation:fbu 0.6s ease-in-out forwards;opacity:1}
@keyframes ftd{0%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes fbu{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.date-display{margin-top:6vmin;font-size:6vmin;color:#aaa;letter-spacing:0.5vmin;font-weight:600}