@keyframes fade{0%{opacity:0;transform:translateY(3px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(3px)}}*{box-sizing:border-box}body{padding:0;margin:0;overflow-y:scroll}canvas{border:1px solid rgb(0,0,0);margin:1rem;min-width:1rem;min-height:1rem;position:relative;justify-self:center;align-self:center;cursor:crosshair}.image-editor{background-color:#333042;display:flex;flex-direction:row;height:100vh;display:grid;grid-template-columns:1fr 9fr;align-items:flex-start}.image-editor__filters{display:flex;flex-direction:column;gap:1rem;min-width:fit-content}.image-editor__controls{padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;background-color:#0000008f;z-index:1;height:100%}.image-editor__buttons{display:flex;gap:.5rem}.image-editor li,.image-editor ul{list-style-type:none;margin:0}*{color:#fff;accent-color:rgb(255,255,255)}button{background-color:#7021b9;border:2px solid rgb(0,0,0);padding:.5rem .25rem;border-radius:1px;display:block;cursor:pointer}button:active{transform:translateY(2px)}button.button--success{background-color:#006e3b}button.button--small{width:3rem;height:3rem}label,button{-webkit-user-select:none;user-select:none}h1{font-size:1.5rem;line-height:3rem;padding:0;margin:0}.notification{font-size:1.5rem;color:#fff;padding:1rem 1.5rem;border-radius:2px;animation:2s forwards fade;text-align:left}.notification--success{background-color:#006e3b}.notification--fail{background-color:#6e0000}.notifications{position:fixed;z-index:2;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0}.filter{display:grid;grid-template-columns:50px minmax(110px,auto);grid-template-rows:auto auto;margin:0;padding:.5rem;gap:.5rem;border-radius:2px;background-color:#ffffff0d}.filter__icon{width:50px;height:50px;border-radius:2px}.filter__slider{grid-column-start:1;grid-column-end:3}