#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.theme-light{background-color:#fff;color:#000}.theme-dark{background-color:#242424;color:#fff}body{text-align:center;font-size:1em;font-family:verdana;margin:0}h1{font-size:1.2em;padding:20px 0;border-bottom:1px solid #eee;margin:0 0 30px;color:#333}.row{text-align:center;display:flex;justify-content:center}.row>div{display:block;width:60px;height:60px;margin:4px;text-align:center;line-height:60px;text-transform:uppercase;font-weight:700;font-size:2.5em}.row.light{background-color:#fff}.row.light>div{border:1px solid #bbb;color:#000}.row.dark{background-color:#242424}.row.dark>div{border:1px solid #555;color:#fff}.row>div.green{--background: #268426;--border-color: #268426;animation:flip .5s ease forwards}.row>div.grey{--background: #a1a1a1;--border-color: #a1a1a1;animation:flip .5s ease forwards}.row>div.yellow{--background: #e2cc68;--border-color: #e2cc68;animation:flip .5s ease forwards}.row>div:nth-child(2){animation-delay:.2s}.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}.keypad.light{max-width:500px;margin:20px auto}.keypad.light>div{margin:5px;width:40px;height:50px;background:#eee;display:inline-block;border-radius:6px;line-height:50px}.keypad.dark{max-width:500px;margin:20px auto}.keypad.dark>div{margin:5px;width:40px;height:50px;background:#333;color:#fff;display:inline-block;border-radius:6px;line-height:50px}.keypad.dark>div.large-key{width:90px}.keypad.light>div.large-key{width:90px}.keypad>div.green{background:#268426;color:#fff;transition:all .3s ease-in}.keypad>div.yellow{background:#e2cc68;color:#fff;transition:all .3s ease-in}.keypad>div.grey{background:#a1a1a1;color:#fff;transition:all .3s ease-in}.modal.light{background:#ffffffb3;position:fixed;width:100%;height:100%;top:0;left:0}.modal.light div{max-width:480px;background:#fff;color:#000;padding:40px;border-radius:10px;margin:10% auto;box-shadow:2px 2px 10px #0000004d}.modal.dark{background:#000000b3;position:fixed;width:100%;height:100%;top:0;left:0}.modal.dark div{max-width:480px;background:#333;color:#fff;padding:40px;border-radius:10px;margin:10% auto;box-shadow:2px 2px 10px #ffffff4d}.lightButton{background-color:#fff;color:#333;padding:10px 20px;border-radius:8px;font-size:16px;border:1px solid #ccc}.lightButton:hover{background-color:#333;color:#fff}.darkButton{background-color:#333;color:#fff;padding:10px 20px;border-radius:8px;font-size:16px;border:1px solid #ccc}.darkButton:hover{background-color:#fff;color:#333}.modal .solution{color:#ff004c;font-weight:700;font-size:.8em;text-transform:uppercase;letter-spacing:1px}.toggleButton{margin-right:10%;padding-top:10px;width:40px;height:40px}@keyframes flip{0%{transform:rotateX(0);background:#fff;border-color:#333}45%{transform:rotateX(90deg);background:#fff;border-color:#333}55%{transform:rotateX(90deg);background:var(--background);border-color:var(--border-color);color:#eee}to{transform:rotateX(0);background:var(--background);border-color:var(--border-color);color:#eee}}@keyframes bounce{0%{transform:scale(1);border-color:#fff}50%{transform:scale(1.2)}to{transform:scale(1);border-color:#333}}