@import url("https://fonts.googleapis.com/css?family=Inter");:root{--ease-in-out:cubic-bezier(0.25,0.46,0.45,0.94);--ease-out:cubic-bezier(0.55,0.085,0.68,0.53);--turn-duration:0.85s;--border:#171717;--card:#262626;--font-family:"Inter",monospace;--font-size:32px;--font-weight:600;--font-color:#FFFFFF}*{box-sizing:border-box}.flipClock{display:flex;justify-content:space-between;width:calc(3 * 64px + 20px);gap:20px}.flipUnitContainer{display:block;position:relative;perspective-origin:50% 50%;perspective:300px;background-color:var(--card);border-radius:8px}.lowerCard,.upperCard{display:flex;position:relative;justify-content:center;width:100%;height:50%;overflow:hidden;border:1px solid var(--border)}.lowerCard span,.upperCard span{font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight);color:var(--font-color)}.upperCard{align-items:flex-end;border-bottom:.5px solid var(--border);border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:0;border-bottom-right-radius:0}.upperCard span{transform:translateY(50%)}.lowerCard{align-items:flex-start;border-top:.5px solid var(--border);border-bottom-left-radius:8px;border-bottom-right-radius:8px}.lowerCard span{transform:translateY(-50%)}.flipCard{display:flex;justify-content:center;position:absolute;left:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden}.flipCard span{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--font-color)}.flipCard.unfold{top:50%;align-items:flex-start;transform-origin:50% 0;transform:rotateX(180deg);background-color:var(--card);border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-top-right-radius:0;border-top-left-radius:0;border-top:.5px solid var(--border);border:.5px solid var(--border)}.flipCard.unfold span{transform:translateY(-50%)}.flipCard.fold{top:0;align-items:flex-end;transform-origin:50% 100%;transform:rotateX(0deg);background-color:var(--card);border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:.5px solid var(--border);border:.5px solid var(--border)}.flipCard.fold span{transform:translateY(50%)}@keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(-180deg)}}@keyframes unfold{0%{transform:rotateX(180deg)}to{transform:rotateX(0deg)}}.flipCard.fold{animation:fold var(--turn-duration) var(--ease-in-out) forwards;transform-style:preserve-3d}.flipCard.unfold{animation:unfold var(--turn-duration) var(--ease-in-out) forwards;transform-style:preserve-3d}.flipCard.fold:not(.animating){transform:rotateX(-180deg)}.flipCard.unfold:not(.animating){transform:rotateX(0deg)}@media (max-width:768px){.flipClock{width:calc(3 * 64px + 20px);gap:15px}.flipUnitContainer{width:100px;height:70px}.flipCard span,.lowerCard span,.upperCard span{font-size:20px}}@media (max-width:480px){.flipClock{width:calc(3 * 64px + 20px);gap:10px}.flipUnitContainer{width:80px;height:64px}.flipCard span,.lowerCard span,.upperCard span{font-size:20px}}