body,html{background:#222;margin:0}*{box-sizing:border-box}h1{font-size:30px;margin:5px}hr{border:0;border-top:1px solid #444;margin-bottom:20px}.App{font-family:sans-serif;text-align:center;text-transform:uppercase;color:#fff}.cell-wrap{display:inline-flex;position:relative;width:50px;height:50px;transform-style:preserve-3d;margin:5px 5px 0}.row.attempted .cell-wrap{transform:rotateX(180deg);transition:transform .8s}.row.shake .cell-wrap{animation:shake .2s}.cell{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;font-size:24px;font-weight:700;justify-content:center;align-items:center;background-color:#333;vertical-align:bottom}.cell-back{transform:rotateX(180deg)}.keyboard{margin-top:20px}.keyboard-btn{border:0;background:#999;border-radius:5px;margin:2px;min-width:33px;padding:0 5px;min-height:50px;color:#fff;font-weight:700;font-size:14px;transition:background .2s}.keyboard-btn:active{background:#333}.modal-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10}.modal{max-width:400px;margin:100px auto 0;border-radius:10px;background:#111;padding:30px;box-shadow:1px 0 3px #000}.modal h2{margin:0}@keyframes pop{0%{transform:scale(.9)}75%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes shake{0%{transform:translate(-5px)}25%{transform:translate(5px)}50%{transform:translate(-5px)}75%{transform:translate(5px)}to{transform:translate(0)}}