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;border:1px solid #bbb;margin:4px;text-align:center;line-height:60px;text-transform:uppercase;font-weight:700;font-size:2.5em}.row>div.green{--background: #5ac85a;--border-color: #5ac85a;animation:flip .5s ease forwards}.row>div.grey{--background: #a1a1a1;--border-color: #a1a1a1;animation:flip .6s 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{max-width:500px;margin:20px auto}.keypad>div{margin:5px;width:40px;height:50px;background:#eee;display:inline-block;border-radius:6px;line-height:50px}.keypad>div.green{background:#5ac85a;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{background:#ffffffb3;position:fixed;width:100%;height:100%;top:0;left:0}.modal div{max-width:480px;background:#fff;padding:40px;border-radius:10px;margin:10% auto;box-shadow:2px 2px 10px #0000004d}.modal .solution{color:#ff004c;font-weight:700;font-size:.8em;text-transform:uppercase;letter-spacing:1px}@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)}to{transform:rotateX(0);background:var(--background);border-color:var(--border-color);color:#eee}}@keyframes bounce{0%{transform:scale(1);border-color:#ddd}50%{transform:scale(1.2)}to{transform:scale(1);border-color:#333}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}