.tilted{-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.tilted:hover{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.highlight{color:#bbdefc}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}@media screen and (max-width:768px){.col-2{width:100%}.page_wrap{flex-direction:column}}@media screen and (min-width:769px){.col-2{padding:20px}.instructions{width:25%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmwAAAEECAMAAACiBJi9AAAAolBMVEX///9fn+E4aZ8QR383aJ9NgbcxXY5FZ5IuXI4bTYAaTIAYS35WicAdToAOQHIYSn01X44sUX9HZI4VRnkXSXxMdqkcTYAwZZ41aJ9XisIpY51SfK4+cqkyYpYII0A0Z504ap5Wh71Bda0dMFAfT4AaS31GapcdM1Q7caoKJkQTK0sIJEEXKUU6cKo/dKxFd648cqsOJUITKkg9c6xDdq0OP3LPhOGlAAAANnRSTlMAv7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+9LyqXAAAG0UlEQVR4Ae3dhXrrOhaA0WZ8mZmvDjND3v/Rhpp6Z77quN5jR7GT9X9Ybq1V0q7cC62pTd+FBJtgk2ATbEtPsAk2CTbBJv0DNh22ri+wRRcSbIJNgk2rwSbBJtgk2ASbYPvoQpqP2DC2ru9Cgk2wSbAJNkWwSbAJNgk2waaT6uOrPtkjFlWw7WVeOjnYNplgE2yCTbDBJtgEG2yCTbBJn171GWyHzdezT7u+z7/Y9WVg+6pvRnaC7etvdn27CWwf74JNsAk2CbZrCTbBBptgE2zSd31D2GzqTs/Xsz1i3/9wVWCLNpMDMIKtJ/HjN9eCbVSCTbAJNtgEm2CDTbAJNpkbDGL76ecItiW09FtIdYN98eNVFWy/dH01bIZZuWALWjlsxvSwwQZbJdgEG2ywwSbYYIMNNthgE2xBLLKpu9glXNL/BajCqjX49WwfWybsYPumEmztgg022GATbLDBBhtssMEGG2ywwSbYxjY/NsR+/ajS0S9qD+aLWnls+erYsJuELWAN1B5bJthgg02wwZYPNthgg02wwQYbbLDBBhtsv4xtFmw/39AasW0qHY7Ybx/1HX0uOGEMNXsVRD9P+QoI24cvEWybaI3YYIMNNthggw022GCDDTbYYIMNNthg+wi2YWy/RIvCFjXB1mBsdDGh4Yv6e98EdX90lfL3JBrG1kVNsdWaMk09Z2wf7zoatl8C1BKx1YINNthggw022GCDDTbYYIMNNthgg2352P7cq/WmLmy1xmIbrn/ZBdxDKLB1fYEtmkIs+muQWB5btcGl+SUaiS3qmlbDFuUP0NRec/tvng2x/R3fPA9eHVsQS3d8bBFssMEGG2ywwQYbbLDBBhtssMEGG2znje2qv35O00lXxzbckrANln8ttccdkNgwtr02Q+WJzTJL+Llr0DC2KXWLrg22eg2wxTfU1WCb0uqxwQYbbLDBBhtssMEGG2ywwQYbbLDBVird+nlkB8N2+86uuxPmAeWGumT37j+46v4vI6vAqnXS2G5akHbzuXoPN7sedokOja303evGVcPWrTnYYIMNNthggw022NoHG2wNgw022GCDDbaSD7ZW2Eo0BVutIWyP9hrG1rdybNF5YMuvTazD474p/1g6sJW+wDa9Vtj26rLBVu/JHrbNrjy26IjYKk/uGjeMDbaugy0bbLDBBhts6w822GCDDTbYYDsnbCVR4sM4MjbYSjQaW35Tt9Kqsc20DXw/e97g6V5Lx9ZFaWxRN2+PovPAlh9wBbbSd8rYosA2fy2x1YMNNthggw022GBrGmywwQYbbLDBBlu+BtjqdRFsJcqu67M+2MZje1Tp+UzYoiVhi0s0BVvX96KvuyHYSqXn9/omYItOGtvLza6zxRalsE3/2xbY2nR8WLDBVmBrHmywwQYbbLDBBhtssJW+HDbYYJvQq9e7pmGD7VEUjxvsTfoDf7vX9D/Yb44tcT8j2KpVKNYeV+vN02vdgK305bGVvgVgezd8qA+24fLYaosO2yFrRgw22GCDrUGwwQYbbLDBBhtssOULbNMXafnYSqKzxVYO1vvHu+bBVvY6DWxlr3mxPe0rIwtsZa/lY4u6fLBlx1W150sY60tji1aGDbZk+UN9pdq8p17PDVst2GCDDTbYYIMNNthggw022M4F20GnADNBWBu28oFWjA22xCUvE0pu6k7HNqHae3U62GArfXls0dzYSt+JY+uiRWLbXlaiyhMbYKt0Ythg6y77ELb9l4ANNthggw022GCDDTbYYIOtRYnlb4gt35jbgbff+ogOhw22kqw9tnztscEGW7QkbBFsUf272DRYA4+LtvlB/LHOVzQeyV+0xNEe24SvOtvaS9RmVGls2yS2SrDBBhtssMEGG2ywwQYbbOeNLcpja9v2svQL3Ewnyr3EYWdP7bCV/+l0sOlw2KKxi5S+AT9sBw620rd6bF20Qtrpd/U4s4S22KL2EAafb9uNaOyPR82mqbDBBhtssMEGG2ywwQYbbLCNbpGbINtaFWzJ1o8tGkVi8KKW/6s1Yss3ERts8wRb82CLzgNbrQVhyzcdW/Y1z/GnAGlsUftDyvVa/9KQX8z5sUWNsFW+WywfG2ywwQYbbLDBBhtssMEGW9QC23Bt994SJBI8S+u214JtRLC1DjbYGgQbbI1PTAa21ji6VEvDNuf5zTVgy9+ZrLsMNthggw022GCDLR9ssMEGW/PaYttVFlWe8fK3PmCLYGsdbLDBBtuJfETLx3Z+7OY/xn3ktrDBBhtssMEGG2yNgw022GCTYpbQCpt0mtgEmxSDeCMnHbYtbIJNsMEm2NQ+2NQ82ASbYPsXTw90P+AXpg4AAAAASUVORK5CYII=);background-repeat:no-repeat;background-position:bottom;background-size:contain}.app_container{width:75%}}.instructions{background-color:#0a243f;color:#fff;text-align:center}.instructions_wrap{padding:20px}.app_container{background-color:#bbdefc;display:flex;justify-content:center}.app_wrap{display:inline-block;padding:20px;border-radius:6px}.app_wrap_inner{display:flex;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 rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);background-color:#fff;padding-bottom:10px;border-radius:6px 0 0 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 img{width:12px;height:12px;margin-bottom:5px}.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:rgba(206,219,231,.75);width:100px;height:100px;margin-top:-50px;margin-left:-50px;top:50%;left:50%;-webkit-animation:ripple 1s;animation:ripple 1s;opacity:0}.controls_button:focus:not(:active):after,.save_button:focus:not(:active):after{display:block}@-webkit-keyframes ripple{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(10);transform:scale(10)}}@keyframes ripple{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(10);transform:scale(10)}}.grid_wrap{width:352px;height:352px;background-color:#fff;overflow:hidden;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);border-radius:6px;align-self:center}@media screen and (max-width:600px){.grid_wrap{border-radius:0 0 6px 6px}}.erase{-webkit-animation:erase .75s ease-in-out;animation:erase .75s ease-in-out}@-webkit-keyframes erase{0%{-webkit-transform:translateY(0);transform:translateY(0)}12%{-webkit-transform:translateY(-10.89px);transform:translateY(-10.89px)}24%{-webkit-transform:translateY(-12.56px);transform:translateY(-12.56px)}40%{-webkit-transform:translateY(5.56px);transform:translateY(5.56px)}70%{-webkit-transform:translateY(-5.28px);transform:translateY(-5.28px)}}@keyframes erase{0%{-webkit-transform:translateY(0);transform:translateY(0)}12%{-webkit-transform:translateY(-10.89px);transform:translateY(-10.89px)}24%{-webkit-transform:translateY(-12.56px);transform:translateY(-12.56px)}40%{-webkit-transform:translateY(5.56px);transform:translateY(5.56px)}70%{-webkit-transform:translateY(-5.28px);transform:translateY(-5.28px)}}.square{float:left;padding:0;margin:0;-webkit-transition:all .75s ease;transition:all .75s ease;min-width:14px;flex-grow:1}.square,.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;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.palette_header p{margin:0;padding:0}.palette_header img{width:16px;height:16px;margin-right:6px}.palette_header svg{fill:#094887}.palette_header:hover img{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.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;font-size:12px;border:1px solid #1b76d5;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 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);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),-webkit-gradient(linear,left top,left bottom,from(#bbdefc),to(#bbdefc));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(180deg,#bbdefc 0,#bbdefc);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}.colorpicker{flex-direction:column;background-color:rgba(239,236,236,.890196);border-radius:0 6px 6px 6px;color:#586673;font-size:12px;position:absolute;width:310px;z-index:999;-webkit-transform:translateX(-23px) translateY(10px);transform:translateX(-23px) translateY(10px);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}@media screen and (max-height:575px){.colorpicker{-webkit-transform:translateX(47px) translateY(-47px);transform:translateX(47px) translateY(-47px)}}.colorpicker p{text-align:left;margin:5px 0 0 10px}#picker,.colorpicker .palette_squares{margin:10px}#picker{cursor:crosshair;float:left;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,#saturationSlider::-webkit-slider-thumb{width:14px;height:14px;border:0;cursor:pointer}.preview{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);cursor:pointer;height:25px;width:25px}
/*# sourceMappingURL=main.a3f8723b.chunk.css.map */