@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;900&display=swap);:root{--primaryColor:#121213;--secondaryColor:#565758;--white:#fff;--maxWidth:500px;--keyBg:#808384;--inactiveTile:#3a3a3c;--activeTile:#565758;--wrongColor:#b59f3a;--correctColor:#538d4e;font-family:Lato,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:#121213;background:var(--primaryColor);color:#fff;color:var(--white);height:100vh}.main,.w-100,body{width:100%}.main{align-items:center;display:flex;flex-direction:column;height:100vh}.container{max-width:500px;max-width:var(--maxWidth)}.header{border-bottom:1px solid #565758;border-bottom:1px solid var(--secondaryColor);display:grid;font-size:40px;font-weight:900;grid-template-columns:1fr 1fr 1fr;height:50px}.header div:last-child{justify-self:end}.keyboard{bottom:0;display:flex;flex-direction:column;gap:6px;height:200px;padding:0 13px;position:fixed;width:500px;width:var(--maxWidth)}.keyboard-row{display:flex;gap:6px;justify-content:center}.keyboard-key{background-color:#808384;background-color:var(--keyBg);border:none;border-radius:4px;color:#fff;color:var(--white);cursor:pointer;height:58px;min-width:42px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.keyboard-key.absent{background-color:#3a3a3c;background-color:var(--inactiveTile)}.keyboard-key.present{background-color:#b59f3a;background-color:var(--wrongColor)}.keyboard-key.correct{background-color:#538d4e;background-color:var(--correctColor)}.keyboard-key:focus-visible{outline:none}.grid-container{display:flex;justify-content:center}.square-grid{grid-gap:5px;box-sizing:border-box;display:grid;grid-template-rows:repeat(6,1fr);padding:10px}.square-grid-row{display:flex;gap:6px}.square-grid-row.invalid{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-name:Shake;animation-name:Shake}.square-grid-element{align-items:center;border:2px solid #3a3a3c;border:2px solid var(--inactiveTile);display:flex;font-size:24px;font-weight:900;height:62px;justify-content:center;text-transform:uppercase;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:62px}.square-grid-element.active{-webkit-animation:popout .1s ease;animation:popout .1s ease;border-color:#565758;border-color:var(--activeTile);-webkit-transform:rotateX(0deg);transform:rotateX(0deg);transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s;z-index:2}.square-grid-element.active.absent{background-color:#3a3a3c;background-color:var(--inactiveTile);border-color:#3a3a3c;border-color:var(--inactiveTile)}.square-grid-element.active.present{background-color:#b59f3a;background-color:var(--wrongColor);border-color:#b59f3a;border-color:var(--wrongColor)}.square-grid-element.active.correct{background-color:#538d4e;background-color:var(--correctColor);border-color:#538d4e;border-color:var(--correctColor)}.game-controls{align-items:center;display:flex;flex-direction:column;gap:20px;height:200px;justify-content:center}.game-controls button{background-color:#808384;background-color:var(--keyBg);border:none;border-radius:4px;color:#fff;color:var(--white);cursor:pointer;font-size:20px;height:4rem;padding:10px;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:8rem}@-webkit-keyframes popout{0%{border-color:#3a3a3c;border-color:var(--inactiveTile);opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}80%{border-color:#565758;border-color:var(--activeTile);opacity:.8;-webkit-transform:scale(1.1);transform:scale(1.1)}to{border-color:#565758;border-color:var(--activeTile);opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes popout{0%{border-color:#3a3a3c;border-color:var(--inactiveTile);opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}80%{border-color:#565758;border-color:var(--activeTile);opacity:.8;-webkit-transform:scale(1.1);transform:scale(1.1)}to{border-color:#565758;border-color:var(--activeTile);opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes Shake{10%,90%{-webkit-transform:translateX(-1px);transform:translateX(-1px)}20%,80%{-webkit-transform:translateX(2px);transform:translateX(2px)}30%,50%,70%{-webkit-transform:translateX(-4px);transform:translateX(-4px)}40%,60%{-webkit-transform:translateX(4px);transform:translateX(4px)}}@keyframes Shake{10%,90%{-webkit-transform:translateX(-1px);transform:translateX(-1px)}20%,80%{-webkit-transform:translateX(2px);transform:translateX(2px)}30%,50%,70%{-webkit-transform:translateX(-4px);transform:translateX(-4px)}40%,60%{-webkit-transform:translateX(4px);transform:translateX(4px)}}.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.efb7db3a.css.map*/