*{box-sizing:border-box;padding:0;margin:0;border:0;font-family:Arial,sans-serif;line-height:1.2}html,body{width:100%;height:100%}body{background-color:#073b4c;color:#fff}.clock{display:flex}.letter{position:relative;display:grid;width:4vw;height:5vw;border-radius:.33vw;background:linear-gradient(#161616 50%,#1f1f1f 50%);box-shadow:0 0 4px #0000004d;font-size:4vw;font-weight:700;text-align:center}.letter+.letter{margin-left:1vw}.letter .base,.letter .flap{grid-row:1/1;grid-column:1/1}.base{display:grid}.base .top,.base .bottom{position:relative;grid-row:1/1;grid-column:1/1}.base .top:after,.base .bottom:after{content:"";position:absolute;left:0;width:100%;height:2px}.base .top{clip-path:inset(0 0 50% 0)}.base .top:after{top:calc(50% - 1px);background-color:#161616}.base .bottom{clip-path:inset(50% 0 0 0)}.base .bottom:after{bottom:calc(50% - 1px);background-color:#1f1f1f}.flap{display:none;backface-visibility:hidden}.flap.show{display:block;animation:flip .6s ease-in-out 0s 1 normal forwards}.flap.front:before,.flap.back:before{content:attr(data-content)}.flap.front:after,.flap.back:after{content:"";position:absolute;left:0;width:100%;height:2px}.front{clip-path:inset(0 0 50% 0);transform:rotateX(0);background-color:#161616;border-radius:1vw 1vw 0 0}.front:after{top:50%;background-color:#161616}.front.show{animation-name:flip-top}.back{clip-path:inset(50% 0 0 0);transform:rotateX(-180deg);background-color:#1f1f1f;border-radius:0 0 1vw 1vw}.back:after{top:50%;background-color:#1f1f1f}.back.show{animation-name:flip-bottom}@keyframes flip-top{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}}@keyframes flip-bottom{0%{transform:rotateX(-180deg)}to{transform:rotateX(0)}}.header{display:flex;align-items:center;justify-content:center;margin:1vw}