body{text-align:center;font-size:1em;font-family:verdana;margin:0}h1{font-size:1.2em;padding:20px 0;border-radius: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.yellow{--background: #e2cc68;--border-color: #e2cc68;animation:flip .5s ease forwards}.row div.grey{--background:#a1a1a1;--border-color:#a1a1a1;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}.grids{display:flex;justify-content:space-evenly}.keypad div{margin:5px;width:40px;height:50px;background:#eee;display:inline-block;border-radius:6px;line-height:50px}.keypad #Enter{width:60px}.keypad #Backspace{width:50px}@media only screen and (max-width: 400px){.keypad div{width:27px}.keypad #Enter{width:55px}.keypad #Backspace{width:40px}}.keypad div.green{background:#5ac85a;color:#fff;transition:all 0,3s ease-in}.keypad div.yellow{background:#e2cc68;color:#fff;transition:all 0,3s ease-in}.keypad div.grey{background:#a1a1a1;color:#fff;transition:all 0,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-radius:#333}45%{transform:rotateX(90dep);background:#fff;border-radius:#333}55%{transform:rotateX(90deg);background:var(--background);border-color:var(--background-color)}to{transform:rotateX(0);background:var(--background);border-color:var(--background-color);color:#eee}}@keyframes bounce{0%{transform:scale(1);border-color:#ddd}50%{transform:scale(1.2)}to{transform:scale(1);border-color:#333}}@media (max-width: 750px){.grids{justify-content:center;flex-direction:column}.grids .opponent-grid:nth-child(1) .row div{width:15px;height:15px}.grids .opponent-grid:nth-child(2) .row div{width:30px;height:30px;font-size:12px;line-height:30px}.grids .opponent-grid:nth-child(1) h2{font-size:12px}.grids .opponent-grid:nth-child(2) h2{font-size:20px}}