*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#352f44;background-color:var(--color-bg);color:linen;color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.container{margin:0 auto;width:800px}@media screen and (max-width:800px){.container{padding:0 20px;width:95%}}@media screen and (max-width:600px){.container{padding:0 10px!important;width:95%}}@media screen and (max-width:400px){.container{padding:0 5px!important;width:98%}}:root{--color-primary:#5c5470;--color-secondary:#b9b4c7;--color-bg:#352f44;--color-gray:gray;--color-text:linen;--color-success:#28a745;--color-danger:#dc3545;--color-warning:#ffc107;--color-info:#17a2b8;--px-border-radius:12px;--px-border:1px solid var(--color-bg)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{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}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.h2-heading{color:var(--color-secondary);font-size:1.5rem;font-weight:700;letter-spacing:5px;margin:20px 0 30px;position:relative;text-align:center;text-transform:uppercase}.h2-heading:after{background:linear-gradient(90deg,#0000,#538d4e,#0000);bottom:-10px;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:100%}.logo{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:50px auto}.logo,.logo h1{position:relative}.logo h1{color:var(--color-secondary);cursor:pointer;font-size:2.5rem;font-weight:700;letter-spacing:10px;margin-bottom:20px;text-align:center;text-transform:uppercase;transition:color .3s}.logo h1:after{background:linear-gradient(90deg,#0000,#538d4e,#0000);bottom:-10px;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:200px}.logo h1 span{animation:move 1s infinite;display:inline-block}.logo h1 span:first-child{animation-delay:.1s}.logo h1 span:nth-child(2){animation-delay:.2s}.logo h1 span:nth-child(3){animation-delay:.4s}.logo h1 span:nth-child(4){animation-delay:.6s}.logo h1 span:nth-child(5){animation-delay:.8s}@keyframes move{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.logo h1:hover{color:var(--color-primary)}.logo p{color:var(--color-secondary);font-size:1rem;margin-top:20px;text-align:center}@media screen and (max-width:800px){.logo{margin:20px auto}.logo h1{font-size:1.5rem;margin-bottom:8px}.logo p{font-size:.8rem}}.select-level{align-items:center;background-color:var(--color-primary);border:.5px solid var(--color-secondary);border-radius:var(--px-border-radius);box-shadow:0 0 5px #00000080;display:flex;flex-direction:column;justify-content:center;margin:0 auto 50px;padding:10px 20px}.select-level button{background-color:var(--color-secondary);border:var(--px-border);border-radius:var(--px-border-radius);color:var(--color-bg);cursor:pointer;font-size:1rem;font-weight:700;margin:10px;outline:none;padding:20px 40px;transition:all .5s ease-in-out}.select-level button.start-button{background-color:var(--color-success)!important;margin-top:50px}.select-level button.start-button:hover{background-color:var(--color-bg)!important}.select-level button.selected{background-color:var(--color-primary);color:var(--color-secondary)}.select-level button.selected:hover{background-color:var(--color-secondary);color:var(--color-bg)}.select-level button:hover{background-color:var(--color-primary);color:var(--color-secondary);transform:translateY(-5px)}.select-level .level-buttons{flex-wrap:wrap}.how-to-play,.select-level .level-buttons{align-items:center;display:flex;flex-direction:column;justify-content:center}.how-to-play{background-color:var(--color-primary);border:.5px solid var(--color-secondary);border-radius:var(--px-border-radius);box-shadow:0 0 5px #00000080;margin-bottom:50px;padding:10px 20px}.how-to-play p{color:var(--color-secondary);font-size:1rem;margin-bottom:20px;text-align:center}.how-to-play div{animation:move 5s infinite}.how-to-play h5{color:var(--color-text);font-size:1rem;margin-bottom:30px;margin-top:10px;text-align:center}.how-to-play h5 b{color:var(--color-secondary);font-weight:800}.footer{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:20px auto}.footer a,.footer p{font-size:1rem;margin-bottom:10px}.footer a,.footer p,.letter{color:var(--color-secondary);text-align:center}.letter{border:1px solid var(--color-secondary);border-radius:3px;cursor:pointer;display:inline-block;font-size:2rem;font-size:4rem;font-weight:800;height:90px;margin:5px;overflow:hidden;padding:5px;text-transform:uppercase;transition:all .5s ease-in-out;width:90px}@media screen and (max-width:800px){.letter{border-radius:3px;font-size:1.5rem;font-size:2rem;font-weight:800;height:50px;padding:5px;text-transform:uppercase;width:50px}}.letter.filled{animation:pop .3s;background-color:var(--color-secondary);border:none;color:var(--color-bg)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.how-to-play .letter{border-radius:3px;font-size:1.5rem;font-size:2rem;font-weight:800;height:50px;padding:5px;text-transform:uppercase;width:50px}.letter.green-letter{background-color:var(--color-success);border:none;color:var(--color-text)}.letter.yellow-letter{background-color:var(--color-warning);border:none;color:var(--color-text)}.letter.gray-letter{background-color:var(--color-gray);border:none;color:var(--color-text)}.hints{background-color:var(--color-primary);border-radius:var(--px-border-radius);color:var(--color-text);padding:15px 25px;position:absolute;right:50%;top:120px;transform:translateX(50%)}.hints .hint-text{font-size:1.2rem;font-weight:700}.notification{background-color:var(--color-success);border:var(--px-border);border-radius:var(--px-border-radius);color:var(--color-text);display:none;font-weight:700;padding:10px 20px;position:absolute;right:50%;top:5px;transform:translateX(50%);z-index:1000}.notification.show{display:block}.game-header{align-items:center;display:flex;justify-content:space-evenly;margin-bottom:20px;padding:10px 20px}.game-header .item{background-color:var(--color-primary);border:var(--px-border);border-radius:var(--px-border-radius);color:var(--color-text);cursor:pointer;font-weight:700;padding:10px 20px;text-align:center}@media screen and (max-width:800px){.game-header .item{padding:10px 15px}.game-header{flex-wrap:wrap}.game-header .item{margin-bottom:10px;width:calc(50% - 10px)}}.game-header .item.disable{background-color:#000;cursor:not-allowed}.game-content,.keyboard{align-items:center;display:flex;flex-direction:column;justify-content:center}.keyboard{margin-top:20px}.keyboard .row{align-items:center;display:flex;justify-content:center;margin-bottom:10px}.keyboard .key{background-color:var(--color-primary);border:var(--px-border);border-radius:var(--px-border-radius);color:var(--color-text);cursor:pointer;font-size:1rem;font-weight:700;margin:0 5px;padding:20px 25px}@media screen and (max-width:800px){.keyboard{display:none}.game-header{margin-bottom:5px}.game-header .item{font-size:.8rem}}.keyboard .key.yellow{background-color:var(--color-warning)}.keyboard .key.success{background-color:var(--color-success)}.keyboard .key.wrong{background-color:var(--color-gray)}.mobile-keyboard{align-items:center;display:none;flex-wrap:wrap;justify-content:center;margin-top:20px}@media screen and (max-width:800px){.mobile-keyboard{display:flex}}.mobile-keyboard .row{align-items:center;display:flex;justify-content:center;margin-bottom:6px}.mobile-keyboard .key{background-color:var(--color-primary);border:var(--px-border);border-radius:var(--px-border-radius);color:var(--color-text);cursor:pointer;font-size:.8rem;font-weight:700;margin:0 1px;padding:10px 15px}.game-line.entered{animation:rotate 1s linear}@keyframes rotate{0%{transform:rotateX(0)}to{transform:rotateX(1turn)}}.game-line.wrong{animation:shake .5s linear}@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-10px)}to{transform:translateX(0)}}
/*# sourceMappingURL=main.dfe16255.css.map*/