body{font-family:Verdana,Geneva,Tahoma,sans-serif;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}.row{display:flex;justify-content:center}.row,.row>div{text-align:center}.row>div{border:1px solid #bbb;color:#000;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:#4f864a;--border-color:#4f864a}.row>div.green,.row>div.yellow{-webkit-animation:flip .5s ease forwards;animation:flip .5s ease forwards}.row>div.yellow{--background:#b59f3b;--border-color:#b59f3b}.row>div.grey{--background:#3a3a3c;--border-color:#3a3a3c;-webkit-animation:flip .5s ease forwards;animation:flip .5s ease forwards}.row>div:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s}.row>div:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}.row>div:nth-child(4){-webkit-animation-delay:.6s;animation-delay:.6s}.row>div:nth-child(5){-webkit-animation-delay:.8s;animation-delay:.8s}.row.current>div.filled{-webkit-animation:bounce .2s ease-in-out forwards;animation:bounce .2s ease-in-out forwards}.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:#4f864a}.keypad>div.green,.keypad>div.yellow{color:#fff;transition:all .3s ease-in}.keypad>div.yellow{background:#b59f3b}.keypad>div.grey{background:#3a3a3c;color:#fff;transition:all .3s ease-in}.modal{background:hsla(0,0%,100%,.7);height:100%;left:0;position:fixed;top:0;width:100%}.modal div{background:#fff;border-radius:10px;box-shadow:2px 2px 10px rgba(0,0,0,.3);margin:10% auto;max-width:480px;padding:40px}.modal .solution{color:#ff004c;font-size:.8em;font-weight:700;letter-spacing:1px;text-transform:uppercase}@-webkit-keyframes flip{0%{background:#fff;border-color:#333;-webkit-transform:rotateX(0);transform:rotateX(0)}45%{background:#fff;border-color:#333;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background:var(--background);border-color:var(--border-color);-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background:var(--background);border-color:var(--border-color);color:#eee;-webkit-transform:rotateX(0);transform:rotateX(0)}}@keyframes flip{0%{background:#fff;border-color:#333;-webkit-transform:rotateX(0);transform:rotateX(0)}45%{background:#fff;border-color:#333;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background:var(--background);border-color:var(--border-color);-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background:var(--background);border-color:var(--border-color);color:#eee;-webkit-transform:rotateX(0);transform:rotateX(0)}}@-webkit-keyframes bounce{0%{border-color:#ddd;-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{border-color:#333;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%{border-color:#ddd;-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{border-color:#333;-webkit-transform:scale(1);transform:scale(1)}}
/*# sourceMappingURL=main.529fe9b7.css.map*/