@import "https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;700&display=swap";:root{--banner:white;--side:#f9fafb;--middle:#f5f5f5}*{box-sizing:border-box;margin:0;padding:0}body{grid-template:"banner banner banner"10%"left middle right"90%/20% 60% 20%;width:100vw;height:100vh;font-family:Inter,sans-serif;display:grid}#banner{background-color:var(--banner);border:1px solid #e5e5e5;grid-area:banner;justify-content:space-between;align-items:center;display:flex}.logo{height:100%}.logo img{object-fit:contain;height:100%}.download-button{justify-content:flex-end;align-items:center;width:60%;height:100%;padding-right:3%;display:flex}.download{color:#fff;background:linear-gradient(25deg,#371cd3f5,#9fb1d3);border:none;border-radius:5px;outline:none;justify-content:space-evenly;align-items:center;width:17%;height:60%;padding-right:5px;display:flex}.download:hover{background:linear-gradient(25deg,#9fb1d3,#371cd3f5)}.Download{justify-content:space-evenly;padding-right:10px}.save-now{color:#fff;text-decoration:none}#left{background-color:#cafafe;border:1px solid #e5e5e5;flex-direction:column;grid-area:left;justify-content:space-between;padding:5%;display:flex}#tools{flex-direction:column;justify-content:space-between;height:50%;display:flex}#tools p{color:#080420;width:100%;padding-bottom:.5rem;font-size:15px;font-weight:700}#exposure{background-color:#cafafe;margin-top:5px}.exposure-box{margin:2%}#saturate-slider,#hue-slider,#blur-slider,#opacity-slider{background-color:#cafafe;margin:2%}#resize-button{margin:2%}#left>#tools>#tool>.action-tool{color:#000;background:#a8a0ca;border:#060011;border-radius:10px;outline:none;justify-content:center;width:130px;height:50px;margin:5px 2px}#right>#tools>h4{margin-bottom:10px}#right>#tools>.action-tool{color:#000;background:#a8a0ca;border:#060011;border-radius:7px;outline:none;width:auto;height:45px;margin-bottom:5px;padding:0 5%}#left>#tools>#tool>.action-tool:hover{color:#fff;background:#3e6581;box-shadow:0 5px 5px #060011}#right>#tools>.action-tool:hover{color:#fff;background:#3e6581;border-radius:10px;height:55px;box-shadow:0 5px 5px #060011}#upload{justify-content:center;align-items:center;display:flex}.upload-img{background:#548faa;border-radius:30px;outline:none;width:150px;height:60px;margin-bottom:10px;padding:4%}.upload-img a{text-decoration:none}.upload-img i{justify-content:center}.upload-img:hover{color:#fff;background-color:#2b4f70}.input{display:flex}.input span{margin:0 .5rem}.input input{width:2.5rem;height:1.5rem}.dropup-content,.resize{width:100%}.dimensions{display:flex}.aspect label{justify-content:center;align-items:center;width:9rem;height:100%;display:flex}.aspect label span{font-size:.75rem}#middle{background:linear-gradient(#bcdfe2,#bcd7e9f5);flex-direction:column;grid-area:middle;justify-content:space-evenly;align-items:center;display:flex}.canvas{text-align:center;width:50%}.canvas>.uploaded-img-container{text-align:center;background:linear-gradient(#6ad2db,#bdc9d1f5);border:1px solid #8870b82c;flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden;box-shadow:0 10px 15px #000002}.canvas>.uploaded-img-container>.fa-cloud-upload-alt{color:#9c2c96b4;padding:10px;font-size:100px}.uploaded-img-container{height:300px;transition:transform .8s ease-in-out}.uploaded-img-container:hover{transform:rotate(360)}.canvas>.img-box{background-position:50%;background-repeat:no-repeat;background-size:contain;justify-content:center;align-items:center;width:700px;height:400px;padding:0 100px 0 0;display:none}#dos{justify-content:space-around;align-items:center;width:100%;display:flex}.undo,.redo{color:#fff;background:#6b8fa0;border:none;border-radius:30px;justify-content:space-evenly;align-items:center;width:12%;height:150%;margin-bottom:10px;padding:0 10px 0 1px;display:flex}.Clear{background:#6b8fa0;border:none;border-radius:30px;justify-content:space-evenly;align-items:center;width:12%;height:150%;margin-bottom:10px;display:flex}#upload{color:#fff;text-underline-offset:unset;text-decoration:none}.undo:hover,.redo:hover,.Clear:hover{background-color:#271863;text-decoration:none}#right{background-color:#cafafe;flex-direction:column;grid-area:right;justify-content:space-between;padding:5%;display:flex}@media only screen and (max-width:800px){body{grid-template:"banner"10%"middle"50%"left"35%"right"25%/auto;height:auto}#upload{justify-content:center}.download{width:45%}}@media only screen and (max-width:464px){middle,left,right{grid-template-rows:55% 55% 35% 10%;grid-template-columns:auto;height:auto}}@media screen and (max-width:300px){#right{margin-top:60px}}input[type=range].styled-slider{-webkit-appearance:none;height:2.2em}input[type=range].styled-slider.slider-progress{--range:calc(var(--max) - var(--min));--ratio:calc((var(--value) - var(--min))/var(--range));--sx:calc(.5*2em + var(--ratio)*(100% - 2em))}input[type=range].styled-slider:focus{outline:none}input[type=range].styled-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#9e77ed;border:none;border-radius:1em;width:2em;height:2em;margin-top:calc(max(.5em - 1px,0px) - 1em);box-shadow:0 0 2px #000}input[type=range].styled-slider::-webkit-slider-runnable-track{height:1em;box-shadow:none;background:#efefef;border:1px solid #b2b2b2;border-radius:.5em}input[type=range].styled-slider::-webkit-slider-thumb:hover{background:#a487df}input[type=range].styled-slider:hover::-webkit-slider-runnable-track{background:#e5e5e5;border-color:#9a9a9a}input[type=range].styled-slider::-webkit-slider-thumb:active{background:#9e77ed}input[type=range].styled-slider:active::-webkit-slider-runnable-track{background:#f5f5f5;border-color:#c1c1c1}input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track{background:linear-gradient(#9e77ed,#9e77ed)0/var(--sx)100% no-repeat,#efefef}input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track{background:linear-gradient(#a487df,#a487df)0/var(--sx)100% no-repeat,#e5e5e5}input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track{background:linear-gradient(#9e77ed,#9e77ed)0/var(--sx)100% no-repeat,#f5f5f5}input[type=range].styled-slider::-moz-range-thumb{background:#9e77ed;border:none;border-radius:1em;width:2em;height:2em;box-shadow:0 0 2px #000}input[type=range].styled-slider::-moz-range-track{height:max(1em - 2px,0px);box-shadow:none;background:#efefef;border:1px solid #b2b2b2;border-radius:.5em}input[type=range].styled-slider::-moz-range-thumb:hover{background:#a487df}input[type=range].styled-slider:hover::-moz-range-track{background:#e5e5e5;border-color:#9a9a9a}input[type=range].styled-slider::-moz-range-thumb:active{background:#9e77ed}input[type=range].styled-slider:active::-moz-range-track{background:#f5f5f5;border-color:#c1c1c1}input[type=range].styled-slider.slider-progress::-moz-range-track{background:linear-gradient(#9e77ed,#9e77ed)0/var(--sx)100% no-repeat,#efefef}input[type=range].styled-slider.slider-progress:hover::-moz-range-track{background:linear-gradient(#a487df,#a487df)0/var(--sx)100% no-repeat,#e5e5e5}input[type=range].styled-slider.slider-progress:active::-moz-range-track{background:linear-gradient(#9e77ed,#9e77ed)0/var(--sx)100% no-repeat,#f5f5f5}input[type=range].styled-slider::-ms-fill-upper{background:0 0;border-color:#0000}input[type=range].styled-slider::-ms-fill-lower{background:0 0;border-color:#0000}input[type=range].styled-slider::-ms-thumb{box-sizing:border-box;background:#9e77ed;border:none;border-radius:1em;width:2em;height:2em;margin-top:0;box-shadow:0 0 2px #000}input[type=range].styled-slider::-ms-track{height:1em;box-shadow:none;box-sizing:border-box;background:#efefef;border:1px solid #b2b2b2;border-radius:.5em}input[type=range].styled-slider::-ms-thumb:hover{background:#a487df}input[type=range].styled-slider:hover::-ms-track{background:#e5e5e5;border-color:#9a9a9a}input[type=range].styled-slider::-ms-thumb:active{background:#9e77ed}input[type=range].styled-slider:active::-ms-track{background:#f5f5f5;border-color:#c1c1c1}input[type=range].styled-slider.slider-progress::-ms-fill-lower{background:#9e77ed;border:1px solid #b2b2b2;border-right-width:0;border-radius:.5em 0 0 .5em;height:max(1em - 2px,0px);margin:-1px 0 -1px -1px}input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower{background:#a487df;border-color:#9a9a9a}input[type=range].styled-slider.slider-progress:active::-ms-fill-lower{background:#9e77ed;border-color:#c1c1c1}