@import"https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;600&display=swap";.display-none{display:none !important}.centered-flexbox{display:flex;align-items:center;justify-content:center}@keyframes wobble{0%{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}50%{transform:translate(-5px)}60%{transform:translate(5px)}65%{transform:translate(-2.5px)}70%{transform:translate(2.5px)}75%{transform:translate(-1px)}80%{transform:translate(1px)}85%{transform:translate(-0.5px)}95%{transform:translate(0.5px)}100%{transform:translate(0)}}#game canvas{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none}#game #create-solution{position:absolute;width:auto}.logo{margin:50px 0}.logo svg{width:300px;height:300px;animation:48.1s steps(8, start) 6.1s infinite rotate}.logo svg path{opacity:0;transform-origin:center}.logo svg #bigTriangle{fill:#2f4e54;animation:6s ease-in-out 1s infinite forwards infinite-fade}.logo svg #bigTriangle-2{fill:#2f4e54;animation:6s ease-in-out 1.25s infinite forwards infinite-fade}.logo svg #smallTriangle{fill:#7a9e9f;animation:6s ease-in-out 1.5s infinite forwards infinite-fade}.logo svg #parallelogram{fill:#f7e8a4;animation:6s ease-in-out 1.75s infinite forwards infinite-fade}.logo svg #mediumTriangle{fill:#b3c6c6;animation:6s ease-in-out 2s infinite forwards infinite-fade}.logo svg #smallTriangle-2{fill:#7a9e9f;animation:6s ease-in-out 2.25s infinite forwards infinite-fade}.logo svg #cube{fill:#a07178;animation:6s ease-in-out 2.5s infinite forwards infinite-fade}@keyframes infinite-fade{0%{opacity:0}10%{opacity:1}50%{opacity:1}60%{opacity:0}100%{opacity:0}}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#nav{right:0;top:0;z-index:10;padding:10px;font-size:14px;color:#2c464b;user-select:none;transition:right .3s ease}#nav .nav-element{border-right:1px solid #2c464b;padding:0 10px;cursor:pointer}#nav .nav-element #renodor{width:18px;height:18px;user-select:none}#nav .nav-element:last-child{padding-right:0;border-right:none}#nav #full-screen .enabled-text{display:none}#nav[data-full-screen=true] #full-screen .disabled-text{display:none}#nav[data-full-screen=true] #full-screen .enabled-text{display:inline}#nav.small{right:-200px}#patterns-menu{position:fixed;left:0;right:0;bottom:0;margin:0 20px;transition:bottom .5s ease,visibility 1s ease,opacity 1s ease;display:flex;flex-direction:column;align-items:center}#patterns-menu #hide-pattern-menu{display:flex;align-items:center;justify-content:center;padding:10px;cursor:pointer}#patterns-menu #hide-pattern-menu svg{transition:transform .5s ease}#patterns-menu #hide-pattern-menu svg path{fill:#2c464b}#patterns-menu #patterns{margin:0 50px 10px 50px;padding:15px;max-width:1300px;width:100%;background-color:#fff;display:flex;column-gap:50px;justify-content:space-between;overflow-x:overlay;border-radius:.375rem;border:solid 2px #2c464b}#patterns-menu #patterns::-webkit-scrollbar{height:20px}#patterns-menu #patterns::-webkit-scrollbar-thumb{background:#acc8ce;border-radius:10px;border:7px solid #fff}#patterns-menu.hidden{bottom:-140px}#patterns-menu.hidden #hide-pattern-menu svg{transform:scale(1, -1)}#patterns-menu.removed{visibility:hidden;opacity:0}.pattern{padding:10px;border-radius:.375rem;transition:background-color .3s ease,transform .3s ease;cursor:pointer}.pattern svg{width:80px;height:80px;fill:#2c464b;stroke:#2c464b;stroke-width:3px}.pattern[data-solved=true] path{fill:#2c464b}.pattern[data-selected=true]{background-color:#acc8ce}#current-pattern{position:absolute;bottom:217px;padding:15px;border-radius:.375rem;border:solid 2px #2c464b;background-color:rgba(255,255,255,.5)}#current-pattern .pattern-svg svg{width:130px;height:130px;fill:#2c464b}#current-pattern .reveal-pattern{display:none;width:20px;height:20px;position:absolute;left:10px;top:5px;fill:#2c464b;cursor:pointer}#current-pattern[data-solved=true] .pattern-svg path{fill:#2c464b}#current-pattern[data-solved=true] .reveal-pattern{display:block}#current-pattern[data-revealed=true] .reveal-pattern .eye{display:none}#current-pattern[data-revealed=true] .reveal-pattern .eye-crossed{display:block}#current-pattern[data-revealed=false] .reveal-pattern .eye{display:block}#current-pattern[data-revealed=false] .reveal-pattern .eye-crossed{display:none}#current-pattern[data-animated=true] .pattern-svg svg{animation:.8s ease-in-out wobble}.help-modal-trigger{cursor:pointer}.help-modal-trigger svg{fill:#2c464b;width:20px;height:20px}.help-modal-container{visibility:hidden}.help-modal-container .help-modal{width:100%;height:100%;position:absolute;top:0;right:0;left:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:10}.help-modal-container .help-modal .modal-content{width:100%;max-width:870px;max-height:90%;position:relative;background-color:#fff;margin:50px;padding:30px 50px;border-radius:.375rem;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity 1s ease-in-out;overflow-y:overlay}.help-modal-container .help-modal .modal-content::-webkit-scrollbar{width:20px}.help-modal-container .help-modal .modal-content::-webkit-scrollbar-thumb{background:#cdcdcd;border-radius:10px;border:7px solid #fff}.help-modal-container .help-modal .modal-content .modal-close{position:absolute;top:10px;right:20px;cursor:pointer;opacity:.7}.help-modal-container .help-modal .modal-content .modal-close svg{width:25px;height:25px;fill:#2c464b}.help-modal-container .help-modal .modal-content .modal-title h1{color:#2c464b}.help-modal-container .help-modal .modal-content .modal-body h3{color:#2c464b}.help-modal-container .help-modal .modal-content .modal-body .help-modal-blocks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:50px;row-gap:30px;column-gap:20px}.help-modal-container .help-modal .modal-content .modal-body .help-modal-blocks .help-modal-block{width:45%;display:flex;align-items:center;flex-direction:column;text-align:center;padding:15px;background-color:#efefef;border-radius:.375rem}.help-modal-container .help-modal .modal-content .modal-body .help-modal-blocks .help-modal-block svg{width:110px;height:110px}.help-modal-container .help-modal .modal-content .modal-buttons{display:flex;column-gap:10px;margin-top:20px}.help-modal-container[data-open=true]{visibility:visible}.help-modal-container[data-open=true] .help-modal .modal-content{opacity:1}@media(max-width: 575px){.help-modal-container .help-modal .modal-content{margin:10px;padding:20px}}@media(max-width: 767px){.help-modal-container .help-modal .modal-content .modal-body .help-modal-blocks{flex-direction:column}.help-modal-container .help-modal .modal-content .modal-body .help-modal-blocks .help-modal-block{width:100%}}.winning-modal-container{visibility:hidden}.winning-modal-container .winning-modal{width:100%;height:100%;position:absolute;top:0;right:0;left:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:10}.winning-modal-container .winning-modal .modal-content{width:100%;max-width:870px;height:70%;position:relative;background-color:#fff;margin:50px;border-radius:.375rem;flex-direction:column;row-gap:25px;opacity:0;transition:opacity 1s ease-in-out}.winning-modal-container .winning-modal .modal-content .modal-close{position:absolute;top:0;right:0;padding:20px 25px;cursor:pointer;opacity:0;transition:opacity 1s ease-in-out 7s}.winning-modal-container .winning-modal .modal-content .modal-close svg{width:35px;height:35px;fill:#cdcdcd;transition:fill .5s ease}.winning-modal-container .winning-modal .modal-content .modal-close:hover svg{fill:#2c464b}.winning-modal-container .winning-modal .modal-content .modal-title{opacity:0;transition:opacity 1s ease-in-out 6s}.winning-modal-container .winning-modal .modal-content .modal-title h1{color:#2c464b;font-weight:400;margin:0;padding:0 25px;max-width:500px;text-align:center}.winning-modal-container .winning-modal .modal-content .modal-body svg{width:200px;height:200px;animation:.8s ease-in-out 5s wobble}.winning-modal-container .winning-modal .modal-content .modal-body svg path{opacity:0;transform-origin:center}.winning-modal-container .winning-modal .modal-content .modal-body svg #bigTriangle{fill:#2f4e54;animation:1s ease-in-out 1s forwards fade-in,1s ease-in-out 2.5s forwards fill-color}.winning-modal-container .winning-modal .modal-content .modal-body svg #bigTriangle-2{fill:#2f4e54;animation:1s ease-in-out 1.25s forwards fade-in,1s ease-in-out 2.75s forwards fill-color}.winning-modal-container .winning-modal .modal-content .modal-body svg #mediumTriangle{fill:#b3c6c6;animation:1s ease-in-out 1.5s forwards fade-in,1s ease-in-out 3s forwards fill-color}.winning-modal-container .winning-modal .modal-content .modal-body svg #smallTriangle{fill:#7a9e9f;animation:1s ease-in-out 1.75s forwards fade-in,1s ease-in-out 3.25s forwards fill-color}.winning-modal-container .winning-modal .modal-content .modal-body svg #smallTriangle-2{fill:#7a9e9f;animation:1s ease-in-out 2s forwards fade-in,1s ease-in-out 3.5s forwards fill-color}.winning-modal-container .winning-modal .modal-content .modal-body svg #cube{fill:#a07178;animation:1s ease-in-out 2.25s forwards fade-in,1s ease-in-out 3.75s forwards fill-color}.winning-modal-container .winning-modal .modal-content .modal-body svg #parallelogram{fill:#f7e8a4;animation:1s ease-in-out 2.5s forwards fade-in,1s ease-in-out 4s forwards fill-color}.winning-modal-container .winning-modal .modal-content .modal-buttons{display:flex;column-gap:10px;opacity:0;transition:opacity 1s ease-in-out 7s;margin-top:20px}.winning-modal-container[data-open=true]{visibility:visible}.winning-modal-container[data-open=true] .winning-modal .modal-content{opacity:1}.winning-modal-container[data-open=true] .winning-modal .modal-content .modal-close{opacity:1}.winning-modal-container[data-open=true] .winning-modal .modal-content .modal-title{opacity:1}.winning-modal-container[data-open=true] .winning-modal .modal-content .modal-buttons{opacity:1}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fill-color{100%{fill:#2c464b}}@media(max-width: 575px){.winning-modal-container .winning-modal .modal-content{margin:10px}}.button{width:100%;padding:10px 30px;border-radius:.375rem;text-decoration:none;text-align:center;cursor:pointer}.button.primary{border:none;background-color:#2c464b;color:#fff}.button.secondary{border:2px solid #2c464b;background-color:transparent;color:#2c464b;font-weight:600}.login-form-container{display:flex;flex-direction:column;align-items:center}.login-form-container .login-form{width:100%;max-width:400px;display:flex;flex-direction:column;row-gap:30px}.login-form-container .login-form form{display:flex;flex-direction:column;row-gap:10px;margin:20px 0}.login-form-container .login-form form input{width:100%;padding:10px;font-size:16px}.login-form-container .login-form form .button{padding:15px 10px;font-size:16px}.login-form-container .login-form form .actions{text-align:center}.login-form-container .login-form form .actions a{margin-top:10px}.login-form-container a{color:#2c464b}.logout{border:none;background-color:transparent;display:flex;align-items:center;justify-content:center;font-size:14px;color:#2c464b;font-family:"Rubik",sans-serif;padding:0;cursor:pointer}.flash{position:absolute;bottom:0;left:0;width:100%;text-align:center;display:flex;align-items:center;column-gap:10px}.flash.alert{background-color:#ff7f75}.flash.alert .message,.flash.alert .close{color:#fff}.flash.notice{background-color:#acc8ce}.flash .message{width:100%;padding:10px}.flash .close{cursor:pointer;padding:10px;display:flex;align-items:center;justify-content:center}*,*::before,*::after{box-sizing:border-box}body{font-family:"Rubik",sans-serif}body #game{user-select:none}body #game canvas{user-select:none}