@import url("https://fonts.googleapis.com/css?family=Droid+Sans+Mono");.easeInOut{animation-timing-function:cubic-bezier(.455,.03,.515,.955)}.turnDuration{animation-duration:.6s}*{box-sizing:border-box}body{margin:0}#app{width:100%;min-height:100vh;justify-content:center;align-items:center;background-color:var(--home-accent);background-image:linear-gradient(62deg,var(--home-accent) 0,var(--home-warning) 100%)}#app,header{display:flex;position:relative}.border{color:var(--home-text-muted)}.card{background-color:var(--home-card)}.font-family{font-family:Droid Sans Mono,monospace}.font-size{font-size:2em}.font-width{font-weight:lighter}.font-color{color:var(--home-text)}.flipClock{display:flex;justify-content:space-between;width:calc(3 * 140px + 80px)}.flipUnitContainer{display:block;position:relative;width:140px;height:120px;perspective-origin:50% 50%;perspective:300px;background-color:var(--home-elevated);border-radius:3px;box-shadow:var(--home-shadow-sm)}.lowerCard,.upperCard{display:flex;position:relative;justify-content:center;width:100%;height:50%;overflow:hidden;border:1px solid var(--home-border)}.lowerCard span,.upperCard span{font-size:12px;font-family:Droid Sans Mono,monospace;font-weight:lighter;color:var(--home-text)}.upperCard{align-items:flex-end;border-bottom:.5px solid var(--home-border);border-top-left-radius:3px;border-top-right-radius:3px}.upperCard span{transform:translateY(50%)}.lowerCard{align-items:flex-start;border-top:.5px solid var(--home-border);border-bottom-left-radius:3px;border-bottom-right-radius:3px}.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:Droid Sans Mono,monospace;font-size:12px;font-weight:lighter;color:var(--home-text)}.flipCard.unfold{top:50%;align-items:flex-start;transform-origin:50% 0;transform:rotateX(180deg);background-color:var(--home-card);border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top:.5px solid var(--home-border);border:.5px solid var(--home-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(--home-chip);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom:.5px solid var(--home-border);border:.5px solid var(--home-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)}}.fold{animation:fold .6s cubic-bezier(.455,.03,.515,.955) forwards}.fold,.unfold{transform-style:preserve-3d}.unfold{animation:unfold .6s cubic-bezier(.455,.03,.515,.955) forwards}