@import"https://fonts.googleapis.com/css?family=Droid+Sans+Mono";body{margin:0}body{margin:0;background-color:#191919}.widgetContainer{display:flex;justify-content:center;align-items:center;height:100vh}*{box-sizing:border-box}#app{display:flex;position:relative;width:100%;min-height:100vh;justify-content:center;align-items:center;background-color:#fbab7e;background-image:linear-gradient(62deg,#fbab7e,#f7ce68)}header{display:flex;position:relative}header h1{font-family:Droid Sans Mono,monospace;font-weight:lighter;text-transform:uppercase;letter-spacing:.1em;color:#fff}.flipClock{display:flex;justify-content:space-between;width:780px}@media screen and (max-width: 768px){.flipClock{width:500px;padding:20px}}.flipUnitContainer{display:block;position:relative;width:240px;height:220px;perspective-origin:50% 50%;perspective:300px;background-color:#202020;border-radius:10px}@media screen and (max-width: 768px){.flipUnitContainer{width:110px;height:100px}}.flipUnitContainer .upperCard,.flipUnitContainer .lowerCard{display:flex;position:relative;justify-content:center;width:100%;height:50%;overflow:hidden;border:1px solid #202020}.flipUnitContainer .upperCard span,.flipUnitContainer .lowerCard span{font-size:7em;font-family:Droid Sans Mono,monospace;font-weight:700;color:#404040}@media screen and (max-width: 768px){.flipUnitContainer .upperCard span,.flipUnitContainer .lowerCard span{font-size:5em}}.flipUnitContainer .upperCard{align-items:flex-end;border-bottom:.5px solid #202020;border-top-left-radius:10px;border-top-right-radius:10px}.flipUnitContainer .upperCard span{transform:translateY(50%)}.flipUnitContainer .lowerCard{align-items:flex-start;border-top:.5px solid #202020;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.flipUnitContainer .lowerCard span{transform:translateY(-50%);color:#4d4d4d}.flipUnitContainer .flipCard{display:flex;justify-content:center;position:absolute;left:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden;border-radius:10px}.flipUnitContainer .flipCard span{font-family:Droid Sans Mono,monospace;font-size:7em;font-weight:700;color:#404040}@media screen and (max-width: 768px){.flipUnitContainer .flipCard span{font-size:5em}}.flipUnitContainer .flipCard.unfold{top:50%;align-items:flex-start;transform-origin:50% 0%;transform:rotateX(180deg);background-color:#202020;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border:.5px solid #202020;border-top:.5px solid #202020;z-index:2;color:#4d4d4d}.flipUnitContainer .flipCard.unfold span{transform:translateY(-50%);color:#4d4d4d}.flipUnitContainer .flipCard.fold{top:0%;align-items:flex-end;transform-origin:50% 100%;transform:rotateX(0);background-color:#202020;border-top-left-radius:10px;border-top-right-radius:10px;border:.5px solid #202020;border-bottom:.5px solid #202020}.flipUnitContainer .flipCard.fold span{transform:translateY(50%)}.fold{animation:fold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards;transform-style:preserve-3d}.unfold{animation:unfold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards;transform-style:preserve-3d}@keyframes fold{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}}@keyframes unfold{0%{transform:rotateX(180deg)}to{transform:rotateX(0)}}