input[type=range].styled-slider{height:2.2em;-webkit-appearance:none}input[type=range].styled-slider.slider-progress{--range: calc(var(--max) - var(--min));--ratio: calc((var(--value) - var(--min)) / var(--range));--sx: calc(.5 * 18px + var(--ratio) * (100% - 18px))}input[type=range].styled-slider:focus{outline:none}input[type=range].styled-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:1em;background:#e7d5b9;border:4px solid #155d88;box-shadow:none;margin-top:calc(4px - max(18px * .5,4px))}input[type=range].styled-slider::-webkit-slider-runnable-track{height:8px;border:none;border-radius:.5em;background:#e7d5b9;box-shadow:none}input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track{background:linear-gradient(#155d88,#155d88) 0/var(--sx) 100% no-repeat,#e7d5b9}input[type=range].styled-slider::-moz-range-thumb{width:max(10px,0px);height:max(10px,0px);border-radius:1em;background:#e7d5b9;border:4px solid #155d88;box-shadow:none}input[type=range].styled-slider::-moz-range-track{height:8px;border:none;border-radius:.5em;background:#e7d5b9;box-shadow:none}input[type=range].styled-slider.slider-progress::-moz-range-track{background:linear-gradient(#155d88,#155d88) 0/var(--sx) 100% no-repeat,#e7d5b9}input[type=range].styled-slider::-ms-fill-upper{background:transparent;border-color:transparent}input[type=range].styled-slider::-ms-fill-lower{background:transparent;border-color:transparent}input[type=range].styled-slider::-ms-thumb{width:18px;height:18px;border-radius:1em;background:#e7d5b9;border:4px solid #155d88;box-shadow:none;margin-top:0;box-sizing:border-box}input[type=range].styled-slider::-ms-track{height:8px;border-radius:.5em;background:#e7d5b9;border:none;box-shadow:none;box-sizing:border-box}input[type=range].styled-slider.slider-progress::-ms-fill-lower{height:8px;border-radius:.5em 0 0 .5em;margin:-undefined 0 -undefined -undefined;background:#155d88;border:none;border-right-width:0}#root{margin:0 auto;text-align:center}.App{color:#fff;display:flex;height:100vh}.main-container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:50vw;transition:width .5s cubic-bezier(.22,1,.36,1)}.main-img-container{position:relative}.main-img-container>button,.asciiContainer>button{background-color:#0000005e;border:none;border-radius:50%;position:absolute;min-width:.75rem!important;width:.75rem;aspect-ratio:1;overflow:visible;padding:none;margin:none;bottom:-2.75rem;right:4.25rem;opacity:.75;transition:opacity .2s ease}.main-img-container>button:last-child{bottom:-2.75rem;right:1rem}.main-img-container>button:hover,.asciiContainer>button:hover{opacity:1}.main-img-container>button svg,.asciiContainer>button svg{min-width:1rem;scale:1.5;rotate:-5deg}.controllers-container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:0vw;transition:width .5s cubic-bezier(.22,1,.36,1)}.controllers-open{width:30vw;max-width:20rem}.main-component{display:flex;flex-direction:column;justify-content:center;width:100%}.App-header{display:flex;flex-direction:column;align-items:center;font-size:calc(10px + 2vmin)}.blob-container{margin-top:5%;width:100%;inset:0;overflow:clip;position:absolute;z-index:-1}.blob{left:calc(50% - 500px);transform-origin:center;animation:rotation 1000s infinite linear}#blob-path{transition:fill 5s ease;fill:#79b03b}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.canvas{display:none}.asciiContainer{height:fit-content;width:fit-content;max-height:90vh;max-width:90vw;font-family:Courier Prime,monospace;line-height:0%;letter-spacing:.1em;word-wrap:break-word;overflow:auto;position:absolute;inset:2rem 0% 0% 0%;padding:1rem;font-size:clamp(.3vw,.65vw,.9vw);border:#f9a31d 4px dashed;border-radius:1rem;background-color:#212121}.asciiContainer>p{margin-top:0;margin-bottom:.7em}.asciiContainer>button{bottom:unset;top:2.75;right:1rem;color:#d5472c;font-size:.8rem;scale:1.5}.navbar{position:fixed;top:0;margin:0 auto;height:4rem;font-family:Staatliches,cursive;font-weight:600;font-size:1.75rem;color:#79b03b}#title-header{transition:color 5s ease}.navbar>*{margin:0;user-select:none}.color-palette{display:flex;justify-content:center}.color-palette div{height:2rem;aspect-ratio:1 / 1;border-radius:50%}.color-palette *:nth-child(1){background-color:#e7d5b9}.color-palette *:nth-child(2){background-color:#155d88}.color-palette *:nth-child(3){background-color:#f9a31d}.color-palette *:nth-child(4){background-color:#d5472c}.options-panel{margin:0 1rem}.OptPanelComp{min-width:fit-content;border-radius:1.5rem;background-color:#d5472c;padding:1rem;display:flex;justify-content:center;align-items:center;gap:.5rem;margin:.25em 0;animation:pop-in 1s ease forwards;user-select:none}.OptPanelComp p{margin:0}.popIn{animation:pop-in 1s ease forwards}@keyframes pop-in{0%{transform:scale(0)}16%{transform:scale(1.05)}28%{transform:scale(.95)}38%{transform:scale(1.05)}46%{transform:scale(.97)}54%{transform:scale(1)}to{transform:scale(1)}}.hidden{display:none}.pointer{cursor:pointer}.styleselect{margin:0}.resolution{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;max-width:15rem}.resolution-div{display:flex;flex-direction:column;gap:0;justify-content:space-between}.font-container{display:flex;flex-direction:column;justify-content:center}.font-container button{align-self:center;width:fit-content}.hexinput{width:4rem}.colorinput{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2.5rem;width:2.4rem;background-color:transparent;border:none;cursor:pointer}.colorinput::-webkit-color-swatch{border-radius:50%;border:none}.colorinput::-moz-color-swatch{border-radius:50%;border:none}.transparent{display:flex;object-position:center;height:2rem;aspect-ratio:1;cursor:pointer;font-size:1.75em}.droparea{display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px dashed white;border-radius:1rem;height:12rem;width:20rem;font-size:1.2rem;margin:2rem auto;padding:2rem;transition:background-color ease .5s,transform .2s cubic-bezier(.72,-.01,.2,1.46)}.droparea p{margin:0 0 .5rem}.draging{background-color:#e7d5b9;transform:scale(1.02)}.dropit{color:#212121;font-size:1.4rem}.drag-error{background-color:#d5472c;transform:scale(.9);animation:error-shake .75s}@keyframes error-shake{0%{rotate:0deg}10%{rotate:2deg}20%{rotate:-2deg}30%{rotate:0deg}40%{rotate:3deg}50%{rotate:-3deg}60%{rotate:1deg}70%{rotate:-1deg}80%{rotate:2deg}90%{rotate:-1deg}to{rotate:0deg}}.og-preview{margin:auto 0;max-width:70vw;max-height:80vh;border-radius:1.5em;pointer-events:none;background-color:#212121;animation:pop-in .75s ease;transition:backgournd-color 1s ease-in}.og-preview-transp{background-color:transparent}@keyframes zoom{0%{opacity:0;max-width:35vw;max-height:40vh}to{opacity:1;max-width:70vw;max-height:80vh}}.buttons-container{display:grid;gap:.5rem;grid-template-columns:repeat(5,1fr);margin:1rem;rotate:1.5deg}.buttons-container button:nth-child(2){background-color:#d5472c;border:4px solid #e95b3e;grid-column:span 1 / span 1}.buttons-container button:nth-child(2):hover{border-color:#ff7f48}.animate-mutate{grid-column:span 4 / span 4}.animate-mutate button{width:100%;background-color:#79b03b;border:4px solid #85c23f}.animate-mutate button:active{transform:translateY(4px)}.animate-mutate:hover button{border-color:#97d64f}.animate-mutate:hover button svg{animation:shake 1s forwards}@keyframes shake{0%{scale:1;rotate:0deg}20%{rotate:15deg}50%{rotate:-15deg}70%{rotate:10deg}to{scale:1.2;rotate:-10deg}}.animate-save{grid-column:span 5 / span 5;width:107%;rotate:1deg;translate:-4px}.animate-save button:first-child{grid-column:span 4 / span 4}.animate-save button:last-child{grid-column:span 1 / span 1}.animate-save button{width:100%}.animate-save:hover button:nth-child(1) svg{animation:jump .5s ease forwards}@keyframes jump{0%{translate:0% 0%;scale:1;rotate:0deg}50%{translate:0% -25%}to{translate:0% 0%;rotate:-5deg;scale:1.2}}.checkbox-eye{display:flex;align-items:center;height:1.25rem;aspect-ratio:1;font-size:1.25rem;cursor:pointer}.disabled-eye{color:#e7d5b999;cursor:default}@media (max-width: 1280px){.App{flex-direction:column}.main-container{margin-top:6rem}.controllers-open{width:auto;max-width:none}.controllers-open{margin-top:4rem;width:90vw;max-width:30rem}}:root{font-family:Abel,sans-serif;line-height:1.5;font-weight:400;font-size:1.2rem;color-scheme:light dark;color:#ffffffde;background-color:#e7d5b9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#155d88;text-decoration:inherit}a:hover{color:#1a7cb5}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:4px solid #1e72a3;padding:.6em 1.2em;font-size:1.2em;font-family:inherit;background-color:#155d88;cursor:pointer;transition:border-color .25s;display:flex;justify-content:center;align-items:center;gap:4px;min-width:fit-content}button:hover{border-color:#2684bb}button:active{transform:translateY(4px)}@media (prefers-color-scheme: light){:root{color:#155d88;background-color:#fff}a:hover{color:#1a7cb5}button{background-color:#f9f9f9}}input[type=file]{display:none}select,input[type=text]{appearance:none;-webkit-appearance:none;background-color:#e7d5b9;color:#212121;border-radius:.25rem;padding:.25rem;border:none;outline:none;font-size:.8rem;cursor:pointer}input[typoe=radio]{appearance:none;-webkit-appearance:none;background-color:#e7d5b9}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#e7d5b9}::-webkit-scrollbar-thumb{background:#79b03b;width:2px}::-webkit-scrollbar-thumb:hover{background:#90d442}