body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.row{display:flex;justify-content:center}.row,.row>div{text-align:center}.row>div{border:1px solid #bbb;color:#fff;display:block;font-size:2.5em;font-weight:700;height:60px;line-height:60px;margin:4px;text-transform:uppercase;width:60px}.row>div.green{--background:#5ac85a;--border-color:#5ac85a}.row>div.green,.row>div.grey{animation:flip .5s ease forwards}.row>div.grey{--background:#a1a1a1;--border-color:#a1a1a1}.row>div.yellow{--background:#e2cc68;--border-color:#e2cc68;animation:flip .5s ease forwards}.row>div:nth-child(2){animation-delay:.2s}.keypad{margin:20px auto;max-width:500px}.keypad>div{background:#eee;border-radius:6px;display:inline-block;height:50px;line-height:50px;margin:5px;width:40px}.keypad>div.green{background:#5ac85a}.keypad>div.green,.keypad>div.yellow{color:#fff;transition:all .3s ease-in}.keypad>div.yellow{background:#e2cc68}.keypad>div.grey{background:#a1a1a1;color:#fff;transition:all .3s ease-in}.modal{background:#ffffffb3;height:100%;left:0;position:fixed;top:0;width:100%}.modal div{background:#fff;border-radius:10px;box-shadow:2px 2px 10px #0000004d;margin:10% auto;max-width:480px;padding:40px}.modal .solution{color:#ff004c;font-size:.8em;font-weight:700;letter-spacing:1px;text-transform:uppercase}.row>div:nth-child(3){animation-delay:.4s}.row>div:nth-child(4){animation-delay:.6s}.row>div:nth-child(5){animation-delay:.8s}.row.current>div.filled{animation:bounce .2s ease-in-out forwards}body{font-family:verdana;font-size:1em;margin:0;text-align:center}h1{border-bottom:1px solid #eee;color:#333;font-size:1.2em;margin:0 0 30px;padding:20px 0}@keyframes flip{0%{background-color:#fff;border-color:#333;transform:rotateX(0)}45%{background-color:#fff;border-color:#333;transform:rotateX(90deg)}55%{background-color:var(--background);border-color:var(--border-color);color:#eee;transform:rotateX(90deg)}to{background-color:var(--background);border-color:var(--border-color);color:#eee;transform:rotateX(0)}}@keyframes bounce{0%{border-color:#ddd;transform:scale(1)}50%{transform:scale(1.2)}to{border-color:#333;transform:scale(1)}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.aadd0b19.css.map*/