.clock-container{display:flex;justify-content:center;align-items:center;flex-direction:column}h1.clock-title{font-size:4em;font-family:Caveat,system-ui,sans-serif;font-weight:700;color:#333;margin-bottom:.3em;display:flex;text-align:center}.clock{display:grid;grid-template-columns:repeat(3,1fr);gap:3em}.single-clock-block{display:flex;flex-direction:column;align-items:center}.digit-block{display:flex}.clock .digit{margin-right:.1em}.clock .digit:last-child{margin-right:0}.labels{margin-top:.4em;font-size:1.5em;font-family:Caveat,system-ui,sans-serif;color:#333;font-weight:700}.digit{position:relative;float:left;width:.9em;height:1.5em;background-color:#fff;border-radius:.1em;font-family:Antonio,Courier New,monospace;font-size:7em;font-weight:200}.base{display:block;top:50%;left:50%;transform:translate(-50%,-50%);color:#333}.base,.flap{position:absolute}.flap{display:none;width:100%;height:50%;background-color:#fff;left:0;top:0;border-radius:.1em .1em 0 0;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}.flap:before{content:attr(data-content);position:absolute;left:50%;font-family:Antonio,Courier New,monospace;font-weight:200;color:#333}.flap.front:before,.flap.under:before{top:100%;transform:translate(-50%,-50%)}.flap.back{transform:rotateY(180deg)}.flap.back:before{top:100%;transform:translate(-50%,-50%) rotate(180deg)}.flap.over{z-index:2}.flap.under{z-index:1}.flap.front.animating{-webkit-animation:flip-down-front .3s ease-in both;animation:flip-down-front .3s ease-in both}.flap.back.animating{-webkit-animation:flip-down-back .3s ease-in both;animation:flip-down-back .3s ease-in both}.flap.under.animating{-webkit-animation:fade-under .3s ease-in both;animation:fade-under .3s ease-in both}@-webkit-keyframes flip-down-front{0%{transform:rotateX(0deg);background-color:#fff;color:#333}to{transform:rotateX(-180deg);background-color:#a6a6a6;color:black}}@keyframes flip-down-front{0%{transform:rotateX(0deg);background-color:#fff;color:#333}to{transform:rotateX(-180deg);background-color:#a6a6a6;color:black}}@-webkit-keyframes flip-down-back{0%{transform:rotateY(180deg) rotateX(0deg);background-color:#a6a6a6;color:black}to{transform:rotateY(180deg) rotateX(180deg);background-color:#fff;color:#333}}@keyframes flip-down-back{0%{transform:rotateY(180deg) rotateX(0deg);background-color:#a6a6a6;color:black}to{transform:rotateY(180deg) rotateX(180deg);background-color:#fff;color:#333}}@-webkit-keyframes fade-under{0%{background-color:#a6a6a6;color:black}to{background-color:#fff;color:#333}}@keyframes fade-under{0%{background-color:#a6a6a6;color:black}to{background-color:#fff;color:#333}}@media (max-width:1200px){.clock{grid-template-columns:repeat(3,1fr);gap:2em}.digit{font-size:6em}}@media (max-width:767px){.clock{grid-template-columns:repeat(2,1fr);gap:1.5em}.digit{width:.9em;height:1.4em;border-radius:.1em;font-size:4.2em}h1.clock-title{margin:.5em;font-size:2.5em}.labels{margin-top:.2em}.clock-container{justify-content:flex-start;padding:20px}}