:root{--slider-height: .9rem;--font-height1: 1rem;--font-height2: 28px;--view-grid: 64%;--ui-grid: 18%;--slider-grid: 80%;--number-grid: 20%;--input-margin: .1rem;--input-text-top-padding: .2rem;--input-text-btm-padding: .15rem;--number-box-width: 3.5rem;--background-menu-color: #2f2f2f}@media (max-width: 1100px){:root{--slider-height: .7rem;--font-height1: .7rem;--font-height2: 16px;--view-grid: 40%;--ui-grid: 30%;--slider-grid: 75%;--number-grid: 25%;--input-margin: .03rem;--input-text-btm-padding: .1rem;--number-box-width: 2.75rem}}*{margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background-color:#0b1724}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.webgl-container{order:-1;cursor:crosshair;width:100%}.webgl{position:fixed;outline:none}.inconsolata-main{font-family:Inconsolata,monospace;font-optical-sizing:auto;font-weight:300;color:#b5c9d8;font-style:normal;font-size:var(--font-height1)}.inconsolata-input{font-family:Inconsolata,monospace;font-optical-sizing:auto;font-weight:300;color:#d3d3d3cc;font-style:normal;font-size:var(--font-height1)}.inconsolata-main::selection{color:#91a8c0}.slider-text{padding-top:var(--input-text-top-padding);padding-bottom:var(--input-text-btm-padding)}.header-text{font-size:var(--font-height2);font-weight:400}#main-grid{order:2;display:grid;grid-template-columns:var(--ui-grid) var(--view-grid) var(--ui-grid);grid-template-areas:"ui-l center ui-r";width:100%;height:100%}#ui-grid-l{position:relative;grid-area:ui-l;background-color:var(--background-menu-color);padding:1rem;display:grid;grid-template-rows:calc(var(--font-height2)*2) 8fr 1fr;grid-template-areas:"header" "controls" "footer"}#center{z-index:0;display:grid;grid-template-rows:1fr auto;grid-template-areas:"viewer" "timeline";height:100vh}#ui-grid-r{position:relative;grid-area:ui-r;background-color:var(--background-menu-color);padding:1rem;display:grid;grid-template-rows:2% 8fr 1fr;grid-template-areas:"top" "controls" "footer"}#controls-grid,#colors-grid{grid-area:controls}#viewer{grid-area:viewer;border:.1rem solid #686868}#timeline{grid-area:timeline;background-color:var(--background-menu-color);display:grid;grid-template-columns:1fr 6fr;grid-template-areas:"buttons timeline";min-height:40px}#colors-container{padding-top:.4rem}#fractal-select{margin-bottom:.5rem}#timeline-button-container{grid-area:buttons;margin-top:auto;margin-bottom:auto;padding:.2rem}.colorpicker{width:100%;height:22px;padding:0rem;margin:.2rem;border-radius:.2rem;border:1px solid #d3d3d3cc}input[type=color]{padding:0}input[type=color]::-moz-color-swatch{border:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:0}input[type=color]::-webkit-color-swatch{border:none}.button-container{position:relative;justify-content:space-between;display:flex;margin:auto;width:100%;margin-top:.4rem;padding:.3rem .1rem 0}.dual-input-grid{grid-template-columns:var(--slider-grid) var(--number-grid);display:grid;grid-template-areas:"slider number"}.ctrl{justify-self:stretch}.container{width:100%;height:100%;justify-self:stretch}.logo-container{grid-area:header;position:relative}.select-container{grid-area:controls;position:relative;display:flex}.slider-container{position:relative;margin:var(--input-margin)}.btm-outline{height:.3rem;margin-top:.1rem;border-bottom:solid .15rem #5c6d84cc;margin-bottom:0}.control-button{width:31%;padding:.2rem;border-radius:.2rem;border-width:0;background-color:#d3d3d3cc;color:#17385e;cursor:pointer}.selected-button{background-color:#e89c45dd!important}.control-button:hover{background-color:#d3d3d399}.timeline-button{width:20%;padding:.05rem;margin:.05rem;border-radius:.2rem;border-width:0;background-color:#d3d3d3cc;color:#17385e!important;cursor:pointer}.timeline-button:hover{background-color:#d3d3d399}.control-select{padding:.25rem;margin-top:auto;border-radius:.5rem;background-color:#d3d3d3cc;color:#17385e}.control-number{grid-area:number;width:var(--number-box-width);height:var(--slider-height);border-radius:5px;border-width:0;text-align:center;margin:0 .25rem;background-color:#d3d3d355}.control-text{border-radius:5px;border-width:0;padding:.2rem;width:100%;background-color:#d3d3d355}.control-text:focus{outline-width:2px;outline-color:#e4e1e1cc;outline-style:groove}.control-number:focus{outline-width:1px;outline-color:#e4e1e1cc;outline-style:groove}.control-slider{grid-area:slider;-webkit-appearance:none;width:100%;height:var(--slider-height);border-radius:5px;background:#d3d3d3;outline:none;opacity:.7}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-height);height:var(--slider-height);border-radius:50%;background:#768daa;cursor:pointer}.control-slider::-moz-range-thumb{width:var(--slider-height);height:var(--slider-height);border-radius:50%;background:#91a8c0;cursor:pointer}.timeline-slider{grid-area:timeline;display:grid;margin-top:auto;margin-bottom:auto;width:100%;-webkit-appearance:none;height:var(--slider-height);border-radius:5px;background:#d3d3d3;outline:none;overflow:hidden;opacity:.7}.timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-height);height:var(--slider-height);border-radius:0%;background:#768daa;cursor:pointer;box-shadow:-607px 0 0 600px #768daa}.timeline-slider::-moz-range-thumb{width:var(--slider-height);height:var(--slider-height);border-radius:50%;background:#91a8c0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:15px;background:#ccc;border-radius:16px}.w-100{width:100%}.w-75{width:75%}.w-50{width:50%}