@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background-color:#121213;color:#fff;font-family:Montserrat,sans-serif;min-height:100vh;padding:20px;text-align:center}.title{font-size:5vh}.board{grid-gap:.5vw;grid-template-rows:repeat(6,1fr);justify-content:center;margin-top:18vh}.board,.row{display:grid;gap:.5vw}.row{grid-gap:.5vw;grid-template-columns:repeat(5,1fr)}.tile{align-items:center;animation:appear .1s ease;background:#0000;border:2px solid #3a3a3c;border-radius:10%;color:#fff;display:flex;font-size:3vh;font-weight:500;height:6vh;justify-content:center;text-transform:uppercase;transform-origin:center;transition:transform .3s ease,background .3s ease;width:6vh}.tile.flip{transform:rotateX(180deg)}.tile.pop{animation:pop .2s ease}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.green{background:#538d4e;border-color:#538d4e}.yellow{background:#b59f3b;border-color:#b59f3b}.gray{background:#3a3a3c;border-color:#3a3a3c}.keyboard{align-items:center;background:inherit;bottom:0;display:flex;flex-direction:column;flex-grow:0;gap:1vh;justify-content:flex-end;left:0;margin-top:0;padding-bottom:1vh;position:fixed;width:100%}.keyboard-row{display:flex;gap:10px;justify-content:center}.key-wide{flex:1.5 1}.keyboard-row button{background-color:initial;border:none;border-radius:4px;box-shadow:0 2px 4px #0000004d;color:#fff;cursor:pointer;font-size:20px;height:65px;transition:background .2s ease,transform .1s ease;width:65px}.keyboard-row button:hover{background:#2c2c2c;transform:scale(1.05)}@media (max-width:900px){.keyboard{background:inherit;bottom:0;flex-grow:0;gap:.5vh;justify-content:flex-end;left:0;padding-bottom:1vh;position:fixed;width:100%}.keyboard-row button{flex:1 1;font-size:2vh;height:50px;max-width:none}.keyboard{flex-grow:1;gap:.5vh;justify-content:flex-end;margin-top:auto;padding-bottom:1vh;width:100%}.keyboard-row{gap:5px;justify-content:space-between;padding:0 5px;width:100%}.keyboard-row button{border-radius:8px;flex:1 1;font-size:1.8vh;height:6.5vh;max-width:none}.key-wide{flex:1.5 1}.theme-toggle{font-size:18px;left:10px}.help-button,.theme-toggle{bottom:80px;height:40px;width:40px}.help-button{font-size:20px;right:10px}.tutorial-panel{width:85vw}.title{font-size:4vh;margin-right:auto}.top-bar{justify-content:space-between;padding:5px 10px}}@keyframes appear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.tile span{animation:appear .1s ease;display:inline-block}.keyboard-row button.green{background:#538d4e}.keyboard-row button.yellow{background:#b59f3b}.keyboard-row button.gray{background:#3a3a3c}.notification{animation:fadeInOut 2s ease-in-out;background-color:#00000086;border-radius:8px;box-shadow:0 4px 10px #0000001a;color:#fff;font-size:16px;font-weight:500;left:50%;padding:20px 40px;position:absolute;top:40vh;transform:translateX(-50%);z-index:1000}.top-bar{align-items:center;background:inherit;display:flex;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:10}.top-buttons{display:flex;gap:1vw;position:absolute;right:2vw}.top-buttons .help-button,.top-buttons .theme-toggle{background-color:initial;border:none;border-radius:50%;color:#fff;cursor:pointer;height:40px;position:static;transition:background .3s,transform .2s;width:40px}.top-buttons .help-button:hover,.top-buttons .theme-toggle:hover{transform:scale(1.1)}body.light-mode .top-buttons .help-button,body.light-mode .top-buttons .theme-toggle{background-color:initial;color:#000}body.light-mode,body.light-mode .App{background-color:#f5f5f5;color:#333}body.light-mode .tile{background-color:#b4b4b4;border:2px solid #b4b4b4;color:#fff}body.light-mode .keyboard-row button{background-color:#e0e0e0;color:#000}body.light-mode .tile.green{background-color:#85c47c;border-color:#85c47c}body.light-mode .tile.yellow{background-color:#f4de71;border-color:#f4de71}body.light-mode .keyboard-row button:hover{background-color:#d5d5d5}body.light-mode .keyboard-row button.green{background-color:#85c47c}body.light-mode .keyboard-row button.yellow{background-color:#f4de71}body.light-mode .keyboard-row button.gray{background-color:silver}body.light-mode .notification{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.tutorial-panel{align-items:center;background:#1e1e1e;border:none;border-radius:0;box-shadow:none;color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;opacity:0;overflow-y:auto;pointer-events:none;position:fixed;text-align:center;top:0;transform:none;transform:scale(.95);transition:opacity .3s ease,transform .3s ease;width:100vw;z-index:1000}.tutorial-panel.show{opacity:1;pointer-events:auto;transform:scale(1)}.tutorial-panel.hide{opacity:0;pointer-events:none;transform:scale(.95)}body.light-mode .tutorial-panel{background:#fff;color:#333}.tutorial-content{width:60%}.tutorial-content h2{margin-top:0}.tutorial-content ul{padding-left:10px;text-align:left}.tutorial-content li{margin-bottom:8px}.tutorial-content .green{color:#538d4e;font-weight:700}.tutorial-content .yellow{color:#b59f3b;font-weight:700}.tutorial-content .gray{color:#888;font-weight:700}.tutorial-content button{background-color:#333;border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:12px;padding:6px 12px}.tutorial-content button:hover{background-color:#444}body.light-mode .tutorial-content .green{color:#85c47c}body.light-mode .tutorial-content .yellow{color:#f4de71}body.light-mode .tutorial-content .gray{color:#777}body.light-mode .tutorial-content button{background-color:#ddd;color:#000}.body.light-mode .tutorial-content button:hover{background-color:#ccc}body,body.light-mode{overflow:hidden}@media (max-width:900px){.title{font-size:4vh;padding-left:3vw}.top-buttons{display:flex;gap:1.5vw;position:absolute;right:8vw}.keyboard-row button{height:8vh}}.info-icon,.moon-icon{color:#fff;height:30px;transition:filter .3s ease;width:30px}body.light-mode .info-icon,body.light-mode .moon-icon{filter:invert(0) brightness(0) contrast(100%)}.tutorial-footer{color:#999;font-size:1rem;margin-top:40px;text-align:center;-webkit-user-select:text;user-select:text;width:100%}.tutorial-footer a{color:#4ea1f3;cursor:pointer;font-weight:600;text-decoration:underline;transition:color .3s ease}.tutorial-footer a:hover{color:#2978b5}.infinite-button{background-color:#4cafef;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;margin-top:20px;padding:10px 20px;transition:background .3s ease,transform .2s ease}.infinite-button:hover{background-color:#3b9fd9;transform:scale(1.05)}body.light-mode .infinite-button{background-color:#2196f3;color:#fff}body.light-mode .infinite-button:hover{background-color:#1976d2}
/*# sourceMappingURL=main.d7f28d83.css.map*/