.cell{width:calc(100% / var(--size));height:calc(100% / var(--size));border:1px solid var(--box-border-color);outline:1px solid var(--box-border-color);display:flex;justify-content:center;align-items:center;font-size:32px;background-color:transparent}.x-mark{color:var(--x-mark-color);pointer-events:none;display:flex;justify-content:center;align-items:center}.cell-animation{opacity:0;animation:cell-fade-in .25s ease forwards;-webkit-animation:cell-fade-in .25s ease forwards;-o-animation:cell-fade-in .25s ease forwards;-moz-animation:cell-fade-in .25s ease forwards}@keyframes cell-fade-in{0%{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}.column-tip{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--tip-font-size);line-height:var(--tip-line-height);border:1px solid var(--border-color);color:var(--tip-color)}.row-tip{width:100%;display:flex;justify-content:center;align-items:center;font-size:var(--tip-font-size);border:1px solid var(--border-color);color:var(--tip-color)}:root{--tip-color: white;--tip-size: 100px;--tip-font-size: .875rem;--size: 16;--tip-line-height: 1}@media (max-width:600px){:root{--tip-size: 60px;--tip-font-size: .75rem;--tip-line-height: .9}}.nonogram-container{max-height:650px;max-width:650px;display:flex;flex-wrap:wrap;margin-top:2rem;margin-right:calc(var(--tip-size) - 2px)}@media (max-width:1000px){.nonogram-container{margin-right:0}}.nonogram{width:calc(100% - var(--tip-size));aspect-ratio:1/1;display:flex;flex-wrap:wrap;background-color:var(--box-background-color);border:3px solid var(--border-color);position:relative;overflow:visible}.row-tips{width:var(--tip-size);display:flex;flex-wrap:wrap;background-color:var(--box-background-color);border:3px solid var(--border-color);border-right:none}.column-tips{width:calc(100% - var(--tip-size));height:var(--tip-size);margin-left:auto;display:flex;background-color:var(--box-background-color);border:3px solid var(--border-color);border-top:none}.separator-top{position:absolute;top:-2px;right:0;width:calc(100% + 2px);display:flex;border-top:4px solid var(--border-color);pointer-events:none;z-index:5}.separator-left{position:absolute;top:0;height:100%;display:flex;border-right:4px solid var(--border-color);pointer-events:none;z-index:5}.lives-container{display:flex;justify-content:center;gap:.25em;margin-top:.5em;font-size:80px}@media (max-width:700px){.lives-container{font-size:65px}}.life{color:red}.life-animation{animation:life-fade-out 1s forwards;-webkit-animation:life-fade-out 1s forwards;-o-animation:life-fade-out 1s forwards;-moz-animation:life-fade-out 1s forwards}.life-lost-container{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;font-size:300px;background-color:var(--lost-background);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.life-container-animation{animation:container-fade-out .5s forwards;-webkit-animation:container-fade-out .5s forwards;-o-animation:container-fade-out .5s forwards;-moz-animation:container-fade-out .5s forwards}@keyframes life-fade-out{0%{opacity:1}10%{opacity:1}80%{opacity:0}to{opacity:0}}@keyframes container-fade-out{0%{display:flex;opacity:1}10%{opacity:1}80%{opacity:0}to{display:none;opacity:0}}.game-lost-container{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.game-lost-container>h1{text-align:center}.win-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.win-border{outline:3px solid var(--border-color)}@media (max-width:950px){.win-container{flex-direction:column;flex-wrap:nowrap}}@media (max-width: 600px){.win-container{flex-direction:column;flex-wrap:nowrap}.result-info{align-self:flex-start;margin:0 2em}}.win-nonogram{margin-right:0;margin-bottom:1rem;align-items:center;justify-content:center}.collection-btn{border:none;font-size:1.25rem;border-radius:4px;background-color:var(--box-colored);color:#f5f5f5;padding:.5em .75em;margin-top:.5em;margin-bottom:2rem;cursor:pointer}.tips-btn{font-size:1.5rem;border:none;position:absolute;top:3.5rem;left:3.5rem;color:var(--text-color-white);background-color:var(--main-color);padding:.35em .8em;border-radius:6px;cursor:pointer}.tips-modal{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:10;display:flex;justify-content:center;align-items:center;background-color:var(--modal-background-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tips-modal-content{max-width:50%;background-color:var(--modal-content-background-color);padding:3em 2em 2em 3em}.tips-title{display:flex;justify-content:space-between;position:relative}.tips-title>h1{font-size:2rem}.modal-close-btn{border:none;background:none;cursor:pointer;position:absolute;top:-2em;right:-1.25em}.close-btn-icon{color:var(--main-color);font-size:2rem}.tips-ul{margin-top:1em;list-style-type:square}.tips-ul>li{color:var(--text-color);font-size:1.25rem;margin-top:.35em;line-height:1.5}.tips-ul>li::marker{color:var(--main-color)}.home-page{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;position:relative}@media (max-width:600px){.home-page{justify-content:center}}@media (min-width:850px) and (min-height:700px){.home-page{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:2em}.nonogram-container{margin-right:0}.lives-container{display:flex;flex-direction:column}}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0;font-family:K2D,sans-serif;font-style:normal;text-decoration:none}:root{--main-color: #035E7B;--text-color: rgb(25, 25, 25);--text-color-white: whitesmoke;--background-color: #F5F9E9;--modal-background-color: #f5f9e9d8;--modal-content-background-color: #fbffee;--header-background-color: #ced1c5ad;--border-color: #524137;--box-background-color: #6f584b98;--box-border-color: #706d6b56;--box-colored: #035E7B;--x-mark-color: #6f584B;--box-hovered-border-color: #0086b3d0;--box-hovered-background-color: #00506a51;--lost-background: #f5f9e986}body{color:var(--main-color);background-color:var(--background-color);overflow-y:auto}main{height:100vh;width:100%}a:visited{color:var(--main-color)}p{font-size:1.25rem}
