@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap);body{background-color:#333;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;font-size:1em;margin:0;text-align:center}h1{color:#e1eded;font-family:playwrite netherland;font-size:2vw;font-style:italic}.row{display:flex;justify-content:center}.row,.row>div{text-align:center}.row>div{border:1px solid #bbb;border-radius:35px;color:#eee;display:flexbox;font-size:2.5em;font-weight:700;height:60px;line-height:60px;margin:5px;text-transform:uppercase;width:60px}.row>div.green{--background:#64da64;--border-color:#64da64;animation:flip .5s ease forwards}.row>div.grey{--background:#c0bafd;--border-color:#c0bafd;animation:flip .6s ease forwards}.row>div.yellow{--background:#eca817;--border-color:#eca817;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{border-color:#eee;margin:20px auto;max-width:500px}.keypad>div{background:#333;border-color:#eee;border-radius:35px;color:#eee;display:inline-block;height:50px;line-height:50px;margin:5px;width:40px}.keypad>div.green{background:#64da64}.keypad>div.green,.keypad>div.yellow{color:#fff;transition:all .3s ease-in}.keypad>div.yellow{background:#eca817}.keypad>div.grey{background:#c0bafd;color:#fff;transition:all .3s ease-in}.modal{background:#ffffffb3;color:#fff;height:100%;left:0;position:fixed;top:0;width:100%}.modal div{background:#3e5d6df5;border-radius:10px;box-shadow:2px 2px 10px #081fee;margin:10% auto;max-width:480px;padding:40px}.modal .solution{color:#f70;font-size:.8em;font-weight:700;letter-spacing:1px;text-transform:uppercase}@keyframes flip{0%{background:#fff;border-color:#c0bafd;transform:rotateY(0)}49%{background:#fff;border-color:#c0bafd;transform:rotateY(90deg)}51%{background:var(--background);border-color:var(--border-color);transform:rotateY(90deg)}to{background:var(--background);border-color:var(--border-color);color:#fff;transform:rotateY(0deg)}}@keyframes bounce{0%{border-color:#9e9ddb;transform:scale(1)}50%{transform:scale(1.3)}to{border-color:#4b31c0;transform:scale(1)}}
/*# sourceMappingURL=main.688f52df.css.map*/