*{box-sizing:border-box;margin:0}body{background:#111112;font-size:clamp(.5rem,2.5vmin,1.5rem);overflow-x:hidden}main{width:100vw}.content{display:flex;flex-direction:column;margin:0 auto;min-height:100vh;min-width:300px;width:35%}.header{align-items:center;border-bottom:1px solid #3a3a3c;display:flex;font-family:Roboto,sans-serif;justify-content:center;padding:10px 0;position:relative}.title{color:#d7dadc;font-size:2.4em;font-weight:700;letter-spacing:4px}.info-icon{color:#d7dadc;cursor:pointer;font-size:30px}.chart-icon,.question-icon,.settings-icon{color:#858585;cursor:pointer;font-size:1.3em}.chart-icon:hover,.question-icon:hover,.settings-icon:hover{color:#727272}.chart-icon,.settings-icon{margin:0 5px}.keyboard{grid-gap:.25em;display:grid;gap:.25em;grid-auto-rows:3em;grid-template-columns:repeat(20,minmax(auto,1.25em))}.key,.keyboard{justify-content:center}.key{align-items:center;background-color:#818283;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:inherit;grid-column:span 2;outline:none;text-transform:uppercase;-webkit-user-select:none;-ms-user-select:none;user-select:none}.key.large{grid-column:span 3}.key:hover{-webkit-filter:brightness(90%);filter:brightness(90%)}.wrong{background-color:#363636}.wrong-location{background-color:#b59f3b}.correct{background-color:#538d4e}.tile-container{grid-gap:.25em;align-content:center;display:grid;flex-grow:2;gap:.25em;grid-template-columns:repeat(5,3.5em);grid-template-rows:repeat(6,3.5em)}.tile,.tile-container{justify-content:center}.tile{align-items:center;border:2px solid #3a3a3c;color:#d7dadc;display:flex;font-family:Roboto,sans-serif;font-size:1.8em;-webkit-user-select:none;-ms-user-select:none;user-select:none}.backspace-icon{pointer-events:none}.active-tiles{border:1px solid #5f5f5f}.fillAnimation{-webkit-animation:tileFilledAnimation .05s ease-in-out forwards;animation:tileFilledAnimation .05s ease-in-out forwards}@-webkit-keyframes tileFilledAnimation{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes tileFilledAnimation{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}.shakeAnimation{-webkit-animation:shakeTilesAnimation .1s ease-in-out forwards;animation:shakeTilesAnimation .1s ease-in-out forwards}@-webkit-keyframes shakeTilesAnimation{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}40%{-webkit-transform:translateX(10px);transform:translateX(10px)}60%{-webkit-transform:translateX(-20px);transform:translateX(-20px)}80%{-webkit-transform:translateX(20px);transform:translateX(20px)}90%{-webkit-transform:translateX(10px);transform:translateX(10px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shakeTilesAnimation{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}40%{-webkit-transform:translateX(10px);transform:translateX(10px)}60%{-webkit-transform:translateX(-20px);transform:translateX(-20px)}80%{-webkit-transform:translateX(20px);transform:translateX(20px)}90%{-webkit-transform:translateX(10px);transform:translateX(10px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.alert-container{align-items:center;display:flex;flex-direction:column;left:50vw;position:fixed;top:10vh;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:1}.alert-message{background-color:#d6d9db;border-radius:.25em;font-family:Roboto,sans-serif;margin-bottom:.5em;opacity:1;padding:.55em;pointer-events:none;transition:opacity .5s ease-in-out}.alert-message:last-child{margin-bottom:0}.alert-message.hide{opacity:0}.info-container{align-items:center;background:rgba(0,0,0,.9);display:flex;height:100vh;justify-content:center;left:0;position:absolute;top:0;width:100vw}.info-content{background:#1a1a1b;border-radius:.3rem;color:#fff;font-family:Roboto,sans-serif;max-width:500px;padding:1rem 2rem;width:100%}.info-content p{margin:1rem 0}.info-icon{position:absolute;right:0}.exit-icon{cursor:pointer}
/*# sourceMappingURL=main.8fa3f0db.css.map*/