body{font-family:Arial,sans-serif;margin:0;background-color:#fff;color:#586673}h1{padding:20px}button{cursor:pointer}.page_wrap{display:flex;height:100vh;background-image:linear-gradient(to top,#cfd9df,#e2ebf0);background-image:linear-gradient(135deg,#f5f7fa,#c3cfe2);background-image:linear-gradient(to top,#dad4ec 0% 1%,#f3e7e9)}.brand_wrap{background:none;color:#1b76d5;border:1px solid #1b76d5;font-size:12px;border-bottom:2px solid #1a75d5;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;padding:6px 12px 5px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;font-weight:600;display:flex;justify-content:center;align-items:center;gap:3px}.brand_wrap h1{padding:0;margin:0}@media screen and (max-width:768px){.col-2{width:100%}.page_wrap{flex-direction:column}}.brand_footer{width:100%;background-image:url(/bit-easel/assets/mtn-sm-BJ0WOzM6.png);background-repeat:repeat;background-position:bottom;background-size:contain}.instructions{padding:20px}.instructions_wrap{padding:20px;border-radius:6px;background-color:#fff;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;width:100%;background-image:url(/bit-easel/assets/mtn-sm-BJ0WOzM6.png);background-repeat:repeat;background-position:bottom;background-size:contain}.instructions_inner{color:#010014}.app_container{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:100%}.app_wrap{display:inline-block;border-radius:6px}.app_wrap_inner{display:flex;gap:12px;margin-bottom:20px}@media screen and (max-width:768px){.app_wrap{margin-top:20px;margin-bottom:40px}}@media screen and (max-width:600px){.app_wrap_inner{flex-direction:column}}.controls_wrap{display:flex;flex-direction:column;align-items:center;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;background-color:#fff;padding-bottom:10px;border-radius:6px;align-self:center}@media screen and (max-width:600px){.controls_wrap{flex-direction:row;border-radius:6px 6px 0 0}}.controls_button{position:relative;overflow:hidden}.controls_button svg{margin-bottom:5px}.controls_button:disabled{opacity:.5;cursor:default}.color_button,.controls_button{border-radius:3px;background-color:#1b76d5;border:none;margin:10px 10px 0;width:50px;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;outline:none}.controls_button:after,.save_button:after{display:none;content:"";position:absolute;border-radius:50%;background-color:#cedbe7bf;width:100px;height:100px;margin-top:-50px;margin-left:-50px;top:50%;left:50%;animation:ripple 1s;opacity:0}.controls_button:focus:not(:active):after,.save_button:focus:not(:active):after{display:block}@keyframes ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(10)}}.grid_wrap{touch-action:none;width:352px;height:352px;background-color:#fff;overflow:hidden;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;border-radius:6px;align-self:center}@media screen and (max-width:600px){.grid_wrap{border-radius:0 0 6px 6px}}.pixel_canvas{display:block;cursor:pointer}.erase{animation:erase .75s ease-in-out}@keyframes erase{0%{transform:translateY(0)}12%{transform:translateY(-10.89px)}24%{transform:translateY(-12.56px)}40%{transform:translateY(5.56px)}70%{transform:translateY(-5.28px)}}.square{float:left;padding:0;margin:0;outline:none;min-width:14px;flex-grow:1}.square :focus{outline:none}.square:hover{cursor:pointer}.palette_wrap{display:flex;margin-top:10px;align-items:flex-end;flex-direction:column;color:#586673}.palette_header{display:flex;align-items:center;margin-bottom:10px;margin-top:10px;transition:transform .2s ease-in-out}.palette_header p{margin:0;padding:0}.palette_header svg{color:#094887;margin-right:6px}.palette_squares{display:flex;flex-direction:row-reverse;flex-wrap:wrap;min-height:24px;max-width:352px}.palette_selected{width:100%;margin-top:5px}#palette_select{background:none;color:#1b76d5;border:1px solid #1b76d5;font-size:12px;border-bottom:2px solid #1a75d5;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:10px;border-radius:6px;padding:6px 24px 5px 12px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E),linear-gradient(to bottom,#bbdefc 0% 100%);background-repeat:no-repeat,repeat;background-position:right .7em top 50%,0 0;background-size:.65em auto,100%;font-weight:600;cursor:pointer}.gitTab_wrap img{width:32px}.gitTab_wrap{color:#000}.colorpicker{flex-direction:column;background-color:#efecece3;border-radius:0 6px 6px;color:#586673;font-size:12px;position:absolute;width:310px;z-index:999;transform:translate(-23px) translateY(10px);box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}@media screen and (max-height:575px){.colorpicker{transform:translate(47px) translateY(-47px)}}.colorpicker p{text-align:left;margin:5px 0 0 10px}.colorpicker .palette_squares{margin:10px}#picker{cursor:crosshair;float:left;margin:10px;border:0;z-index:3}.controls{display:flex;margin:0 5px;justify-content:space-between;padding:0 5px 5px 0}.controls div{overflow:hidden;padding-left:5px}.controls div input{background-color:#121212;border:1px solid #2f2f2f;color:#ddd;font-size:10px;height:14px;margin-top:5px;text-align:center;width:100px}.controls label{text-align:center;margin-bottom:15px;margin-right:10px}.slider_wrap{display:flex;justify-content:space-between;margin:15px 10px}.slider_wrap label{display:block;text-align:left}.slider{width:136px}#brightnessSlider,#saturationSlider{-webkit-appearance:none;height:3px;background:#121212;outline:none}#brightnessSlider::-webkit-slider-thumb{width:14px;height:14px;border:0;cursor:pointer}#saturationSlider::-webkit-slider-thumb{width:14px;height:14px;border:0;cursor:pointer}.preview{background-color:#fff;border:none;padding:0;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;cursor:pointer;height:25px;width:25px}
