*{margin:0;box-sizing:border-box;}body{background-color:#fff;}header{z-index:100;position:absolute;}#button_div,#paint_header{padding:5px;text-align:right;background-color:#787777;}#button_div+div{z-index:5;position:relative;background-color:#787777;}#fun_button,#paint_button{padding:4px 7px;background-color:#006266;color:white;border:none;border-radius:2px;font-size:15px;}#functions,#paint{padding:5px;width:max-content;position:absolute;background-color:#bfbfbf;transform:translateX(-100%);transition:0.5s transform ease-in-out;}#paint{top:0;left:0;padding:0;position:fixed;transform:scale(0,0);}#functions{padding-right:0;}#functions.opened,#paint.opened{position:relative;transform:translateX(0);}#paint.opened{position:fixed;transform:scale(1,1);}#paint_header,#paint{border-radius:6px;}#paint_button_x{border:none;cursor:pointer;text-align:center;border-radius:2px;transition-duration:0.4s;font-family:'Space Grotesk';}#paint_button_x:hover{background-color:#7e3535;}.paint-bar{padding:5px;}#paint-size-val{color:#2e2e2e;font-family:'Space Grotesk';}#funs_div,#functions_div{overflow-y:auto;overflow-x:hidden;padding-right:5px;}.fun_div span{color:#404040;font-family:'Space Grotesk';}.fun_div button{color:#fff;border:none;font-weight:2;padding:2px 3px;margin-left:10px;border-radius:2px;display:inline-block;background-color:#404040;transition-duration:0.5s;}.fun_div button:hover{background-color:#7e3535;}.fun_div input,#paint-size,#paint-color{margin-left:8px;border-radius:6px;border-color:#006266;box-shadow:4px 2px 6px -3px rgba(0,0,0,0.51)}#funs_div>div{margin:3px 0 3px;}#add_fun{color:#fff;border:none;font-weight:2;margin:5px 4px;cursor:pointer;font-size:16px;padding:4px 6px;border-radius:5px;display:inline-block;background-color:#585858;transition-duration:0.5s;box-shadow:0 11px 15px 0 rgba(0,0,0,0.24),0 15px 34px 0 rgba(0,0,0,0.19);}.checkboxes{width:100%;color:#404040;display:block;margin-top:5px;line-height:25px;font-family:'Space Grotesk';}.checkboxes input{margin-right:3px;}.action_buttons button{top:0;right:0;display:block;cursor:pointer;position:fixed;font-size:14px;padding:7px 7px;border-radius:5px;margin:5px 5px 0 0;border:2px solid #5d94a1;transition:0.6s all ease;background-color:#585858;}#save_image{transform:translateY(115%);}#home_button{transform:translateY(230%);}#undo_button{transform:translateY(345%);}.action_buttons span{color:#fff;text-align:center;letter-spacing:1px;text-decoration:none;font-family:'Space Grotesk';}.action_buttons button:hover{background-color:#006266;}.paint-buttons-cnt{padding-top:8px;}.paint-size{background-color:#146e6d;}.paint-buttons-cnt button{color:#fff;border:none;cursor:pointer;font-size:17px;text-align:center;border-radius:5px;transition:all 0.2s;background-color:#585858;font-family:'Space Grotesk';}.paint-buttons-cnt button span{cursor:pointer;transition:0.3s;position:relative;display:inline-block;}.paint-buttons-cnt button span:after{top:0;right:0;opacity:0;content:'\27A4';transition:0.5s;position:absolute;}.paint-buttons-cnt button:hover span{padding-right:25px;}.paint-buttons-cnt button:hover span:after{right:0;opacity:1;}.paint-buttons-cnt button.active,#add_fun:hover{background-color:#006266;}button{outline:none;}button+button{margin-left:4px;}canvas{z-index:1;position:absolute;}#canvas_draw{z-index:2;position:fixed;}#canvas_drawing{z-index:3;}footer{bottom:0;width:100%;height:4px;z-index:100;position:absolute;text-align:center;background-color:#ccc;}