@font-face{font-family:Zelda;src:url(/static/media/Triforce.d9304d4b480db4c176af.ttf)}body{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:1em;margin:0;text-align:center}#title{background-color:#2a4320;border-bottom:1px solid #d8d181;color:#fff7a1;font-size:5em}#title,h1{font-family:Zelda;margin:0 0 30px;padding:20px 0}h1{color:#000;font-size:3em}#navi{-webkit-animation:naviBounce 1s ease-in-out infinite;animation:naviBounce 1s ease-in-out infinite;cursor:pointer;height:3rem;position:fixed;right:30%;top:3rem;width:auto;z-index:4}@-webkit-keyframes naviBounce{0%{top:3rem}50%{top:2.5rem}to{top:3rem}}@keyframes naviBounce{0%{top:3rem}50%{top:2.5rem}to{top:3rem}}.row{display:flex;justify-content:center}.row,.row>div{text-align:center}.row>div{border:1px solid #bbb;display:block;font-size:2em;font-weight:700;height:60px;line-height:60px;margin:4px;text-transform:uppercase;width:60px}.row>div.green{--background:#5ac85a;--border-color:#5ac85a}.row>div.green,.row>div.grey{-webkit-animation:flip .5s ease forwards;animation:flip .5s ease forwards}.row>div.grey{--background:#a1a1a1;--border-color:#a1a1a1}.row>div.yellow{--background:#e2cc68;--border-color:#e2cc68;-webkit-animation:flip .5s ease forwards;animation:flip .5s 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}.row.current>div.filled{-webkit-animation:bounce .2s ease-in-out forwards;animation:bounce .2s ease-in-out forwards}.keypad{margin:20px auto;max-width:500px}.keypad>div{background:#eee;border-radius:6px;display:inline-block;height:50px;line-height:50px;margin:5px;transition:all .3s ease-in;width:40px}.keypad>div:active{background-color:#2a4320;color:#fff7a1;cursor:pointer}.keypad>div.green{background:#5ac85a;color:#fff;transition:all .3s ease-in}.kepad>div.green:active{color:#5ac85a}.keypad>div.yellow{background:#e2cc68;color:#fff;transition:all .3s ease-in}.keypad>div.yellow:active{color:#e2cc68}.keypad>div.grey{background:#a1a1a1;color:#fff;transition:all .3s ease-in}#delete,#submit{background-color:#2a4320;color:#fff7a1;cursor:pointer;padding:0 .5em;width:auto}#delete:active,#submit:active{background-color:#fff7a1;color:#2a4320}.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:20rem auto;max-width:480px;padding:40px}.listen,.modal .solution{color:#ff004c;font-size:.8em;font-weight:700;letter-spacing:1px;text-transform:uppercase}.modal div .play-again{background-color:#2a4320;border-radius:.2em;color:#fff7a1;cursor:pointer;padding:.4em}.hint-modal{background:rgba(34,34,34,.7);height:100%;left:0;position:fixed;top:0;width:100%}.hint-modal-div{background:#fff;border-radius:10px;box-shadow:2px 2px 10px rgba(0,0,0,.3);margin:15rem auto;max-width:480px;padding:40px;position:relative}.close-hint{background-color:#ff004c;border-radius:50%;color:#fff;cursor:pointer;display:grid;font-size:1rem;height:2rem;line-height:1rem;place-items:center;position:absolute;right:1.1rem;top:1rem;width:2rem}@-webkit-keyframes flip{0%{background:#fff;border-color:#333;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}45%{background:#fff;border-color:#333;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background:var(--background);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background:var(--background);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes flip{0%{background:#fff;border-color:#333;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}45%{background:#fff;border-color:#333;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background:var(--background);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background:var(--background);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@-webkit-keyframes bounce{0%{border-color:#ddd;-webkit-transform:scale(1);transform:scale(1)}50%{border-color:#333;-webkit-transform:scale(1.2);transform:scale(1.2)}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%{border-color:#333;-webkit-transform:scale(1.2);transform:scale(1.2)}to{border-color:#333;-webkit-transform:scale(1);transform:scale(1)}}@media only screen and (max-height:786px),screen and (max-width:900px){#title{font-size:2rem;padding:10px}.row>div{font-size:1.5em;height:40px;line-height:40px;width:40px}.modal div{margin:12rem auto}#navi{height:2rem;right:35%;top:.7rem;width:auto}@-webkit-keyframes naviBounce{0%{top:.7rem}50%{top:1rem}to{top:.7rem}}@keyframes naviBounce{0%{top:.7rem}50%{top:1rem}to{top:.7rem}}}@media only screen and (max-width:686px){#navi{right:15%}}
/*# sourceMappingURL=main.ab6dbac3.css.map*/