@import url(https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap);:root{--color-grey:#a1a1a1;--color-yellow:#e2cc68;--color-green:#5ac85a;--color-white:#eee;--heading-content:#333;--color-light-grey:#eee;--color-medium-grey:#d3d6da;--cell-border:#bbb}.App h1{font-family:Merriweather,serif;font-size:2em;padding:14px 0}body{font-family:verdana;font-size:1em;margin:0;text-align:center}h1{border-bottom:1px solid #eee;border-bottom:1px solid var(--color-light-grey);color:#333;color:var(--heading-content);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:2px solid #bbb;border:2px solid var(--cell-border);color:#eee;color:var(--color-white);font-size:2.5em;font-weight:700;height:60px;line-height:60px;margin:4px;text-transform:uppercase;width:60px}.row .filled{color:#000}.row>div.green{--border-color:var(--color-green);--background-color:var(--color-green)}.row>div.green,.row>div.yellow{-webkit-animation:flip .6s ease forwards;animation:flip .6s ease forwards}.row>div.yellow{--border-color:var(--color-yellow);--background-color:var(--color-yellow)}.row>div.grey{--border-color:var(--color-grey);--background-color:var(--color-grey);-webkit-animation:flip .6s ease forwards;animation:flip .6s 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}.current>.filled{-webkit-animation:bounce .2s ease-in-out forwards;animation:bounce .2s ease-in-out forwards;border-color:#333}.keypad{margin:20px auto;max-width:500px}.keypad>div{background:#d3d6da;background:var(--color-medium-grey);border-radius:6px;cursor:pointer;display:inline-block;height:50px;line-height:50px;margin:5px;text-transform:capitalize;width:40px}.keypad>div.green{background-color:#5ac85a;background-color:var(--color-green)}.keypad>div.green,.keypad>div.yellow{color:#eee;color:var(--color-white);transition:all .3s ease-in}.keypad>div.yellow{background-color:#e2cc68;background-color:var(--color-yellow)}.keypad>div.grey{background-color:#a1a1a1;background-color:var(--color-grey);color:#eee;color:var(--color-white);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-color:#fff;border-color:#7f8487;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}45%{background-color:#fff;border-color:#7f8487;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background-color:var(--background-color);border-color:var(--border-color);color:#eee;color:var(--color-white);-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background-color:var(--background-color);border-color:var(--border-color);color:#eee;color:var(--color-white);-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes flip{0%{background-color:#fff;border-color:#7f8487;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}45%{background-color:#fff;border-color:#7f8487;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background-color:var(--background-color);border-color:var(--border-color);color:#eee;color:var(--color-white);-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background-color:var(--background-color);border-color:var(--border-color);color:#eee;color:var(--color-white);-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@-webkit-keyframes bounce{0%{border-color:#ddd;-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}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.1);transform:scale(1.1)}to{border-color:#333;-webkit-transform:scale(1);transform:scale(1)}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;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}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.d008cca2.css.map*/