@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600;800;900&display=swap";*{font-family:Roboto Slab,serif}* .container{margin:0 auto;background-color:#fff}* a{text-decoration:none}@media (min-width: 767px){.container{width:760px}}@media (min-width: 997px){.container{width:990px}}@media (min-width: 1200px){.container{width:1000px}.container.first{width:1190px}}.main-header{display:flex;justify-content:space-between;align-items:center;background-color:#031733e6;padding:0 20px;position:relative}.main-header .logo{display:flex;gap:10px;align-items:center;position:relative;height:55px}.main-header .logo img{width:70px;position:absolute}.main-header .logo h2{color:#46befd;font-size:25px;padding-left:70px}.main-header .right{display:flex;gap:20px;color:#46befd;font-size:16px}.main-header .right a{display:flex;gap:2px;align-items:center;cursor:pointer;color:#46befd}.main-header .right button{display:flex;align-items:center;cursor:pointer;color:#46befd;background-color:transparent;font-size:16px;border:none}.main-header .right .test{padding:7px 12px;background-color:#000b9d;border-radius:20px;font-weight:700;cursor:pointer;letter-spacing:.7px}@media (max-width: 550px){.main-header{flex-direction:column;padding:0;background-color:#0f0f31}.main-header .right{background-color:#07234ae6;width:100%;padding:10px;justify-content:center}.main-header .right .test{background-color:transparent}}.main-help{display:flex;flex-direction:column;position:absolute;top:55px;right:20px}.main-help ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(50px,200px));padding:10px;gap:10px;list-style:none;flex-wrap:wrap;min-width:300px;max-width:450px;box-shadow:0 0 4px 1px #0000004d;border-radius:10px;background-color:#f1eeee;z-index:2}.main-help ul li{padding:8px}.main-help ul li:hover{background-color:#e7e7e7}.main-help a{text-decoration:none;color:#000}@media (max-width: 550px){.main-help{top:110px}}.firstSection{background-image:url(/photo-shop.png);min-height:calc(100vh - 55px);max-width:100vw;padding:10px;background-repeat:no-repeat;background-size:cover;background-position:center;display:flex;flex-direction:column}.firstSection h2{text-align:center;padding-top:10px;font-size:30px}.firstSection .overLay{background-color:#46befdb3;width:fit-content;padding:20px;margin:20px;color:#46befd;color:#000;min-height:500px}.firstSection .overLay h3{font-size:16px;padding:10px 0}.firstSection .overLay ul{display:flex;flex-direction:column;gap:20px;padding:10px 20px}.firstSection .overLay ul li{font-size:16px}.firstSection .overLay ul .upload{align-self:center;margin-top:10px}.firstSection .overLay ul .upload input{display:none}.firstSection .overLay ul .upload label{width:fit-content;font-size:16px;padding:10px 20px;background-color:#03204ae6;color:#00a7ff;border-radius:5px;cursor:pointer}.firstSection .overLay ul .upload:hover{background-color:#000068}@media (max-width: 797px){.firstSection{align-items:center;background-image:url(/pattern.png)}}.how{min-height:100vh;display:flex;align-items:center;padding-top:20px}.how .container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;padding:10px}.how .container h2{font-size:33px;font-family:Arial,Helvetica,sans-serif}.how .container span{color:#868484;padding-left:20px}.how .container .boxContainer{display:grid;grid-template-columns:repeat(auto-fit,270px);gap:30px;width:100%;justify-content:center}.how .container .boxContainer .box{display:flex;flex-direction:column;gap:20px;padding-bottom:30px}.how .container .boxContainer .box img{width:100%}.how .container .boxContainer .box img.upload{cursor:pointer}.how .container .boxContainer .box div{display:flex;flex-direction:column;padding:0 20px;gap:10px}.how .container .boxContainer .box div p{color:#868484;line-height:1.8rem;letter-spacing:.3px}main .mainSection{display:flex}main .main-aside{display:flex;flex-direction:column;flex:1;background-color:#031733e6;color:#00a7ffe6;box-shadow:0 0 15px #000000bf;clip-path:inset(0px -15px 0px 0px);min-width:250px}main .main-aside h2{align-self:center;padding-top:10px;font-size:25px;color:#00a7ff}main .main-aside button{background-color:#00f;color:#fff;padding:3px}@media (max-width: 779px){main .mainSection{flex-direction:column}}.crop{display:flex;flex-direction:column;gap:20px;align-items:center;flex:1;padding:0 20px 20px}.crop form{display:flex;flex-direction:column;gap:10px;width:100%}.crop form div{display:flex;gap:20px;justify-content:space-between;font-size:18px}.crop form div input{width:60px;background-color:#00f;color:#fff;padding-left:5px;border:0;outline:0}.border{display:flex;flex-direction:column;gap:10px;padding:10px;font-size:16px;flex:1}.border .width{display:flex;flex-direction:column;width:100%}.border .width h3{font-size:18px}.border .width .part1{font-size:20px;padding:10px;display:flex;justify-content:space-between}.border .width .part2 .progressBar{margin:10px;width:calc(100% - 20px);height:5px;position:relative;display:flex;align-items:center}.border .width .part2 .progressBar .value-bar{height:4px;background-color:#09c;z-index:2}.border .width .part2 .progressBar .circle{width:20px;height:20px;border-radius:50%;background-color:#09c;z-index:2;position:absolute;cursor:pointer}.border .width .part2 .progressBar .transperantLine{width:100%;height:4px;position:absolute;background-color:#c0bbbb}.border .custom-color{display:flex;width:100%;align-items:center;flex-direction:column;gap:20px}.border .custom-color h3{font-size:20px}.border .custom-color .colors-container{display:flex;gap:10px}.border .custom-color .colors-container div{width:30px;height:30px;border-radius:50%;overflow:hidden}.border .custom-color .colors-container div.active{width:35px;height:35px}.border .custom-color .colors-container div input{border:0;padding:0;width:200%;height:200%;cursor:pointer;transform:translate(-25%,-25%)}.color{display:flex;flex-direction:column;gap:20px;font-size:16px;padding:10px}.color span{color:#76f576}.draw{display:flex;flex-direction:column;gap:20px;align-items:center;flex:1;padding-bottom:20px}.draw .fontProp,.draw .shadowProp{display:flex;flex-direction:column;width:100%}.draw .fontProp h3,.draw .shadowProp h3{font-size:18px}.draw .fontProp .part1,.draw .shadowProp .part1{font-size:20px;padding:10px;display:flex;justify-content:space-between}.draw .fontProp .part2 .progressBar,.draw .shadowProp .part2 .progressBar{margin:10px;width:calc(100% - 20px);height:5px;position:relative;display:flex;align-items:center}.draw .fontProp .part2 .progressBar .value-bar,.draw .shadowProp .part2 .progressBar .value-bar{height:4px;background-color:#09c;z-index:2}.draw .fontProp .part2 .progressBar .circle,.draw .shadowProp .part2 .progressBar .circle{width:20px;height:20px;border-radius:50%;background-color:#09c;z-index:2;position:absolute;cursor:pointer}.draw .fontProp .part2 .progressBar .transperantLine,.draw .shadowProp .part2 .progressBar .transperantLine{width:100%;height:4px;position:absolute;background-color:#c0bbbb}.draw .custom-color{display:flex;width:100%;align-items:center;flex-direction:column;gap:20px}.draw .custom-color h3{font-size:20px}.draw .custom-color .colors-container{display:flex;gap:10px}.draw .custom-color .colors-container div{width:30px;height:30px;border-radius:50%;overflow:hidden}.draw .custom-color .colors-container div.active{width:35px;height:35px}.draw .custom-color .colors-container div input{border:0;padding:0;width:200%;height:200%;cursor:pointer;transform:translate(-25%,-25%)}.draw button{font-size:16px;padding:5px 20px}.frame{display:flex;flex-direction:column;gap:20px;padding:10px;font-size:16px;flex:1}.frame h2{align-self:center}.frame .imgContaier{display:flex;flex-direction:column;gap:20px;align-items:center;height:330px;overflow-y:scroll;border:10px solid rgba(3,32,74,.9);border-radius:20px;border-right:none;padding:10px;width:200px;margin:0 auto}.frame .imgContaier::-webkit-scrollbar{width:10px}.frame .imgContaier::-webkit-scrollbar-track{background:rgba(3,32,74,.9)}.frame .imgContaier::-webkit-scrollbar-thumb{background-color:#031733e6;border-radius:10px;border:3px solid black}.frame .imgContaier img{width:100px;height:80px;cursor:pointer}.imgSection{display:flex;flex-direction:column;gap:20px;align-items:center;flex:3;color:#00a7ff;background:url(/empty.jpg) rgba(3,32,74,.9);background-blend-mode:multiply;background-size:cover;min-height:80vh}.imgSection .imgContainer{position:relative}.imgSection .imgContainer .first{display:flex;flex-direction:column;gap:20px;align-items:center}.imgSection .imgContainer .first h2{font-size:40px;width:600px}.imgSection .imgContainer .first p{font-size:26px;width:600px;opacity:.9}.imgSection .imgContainer .first.active{display:flex}.imgSection .imgContainer .first.hidden{display:none}.imgSection .imgContainer .image{position:relative}.imgSection .imgContainer .image.active{display:flex}.imgSection .imgContainer .image.hidden{display:none}.imgSection .imgContainer .image .blur{opacity:.8}.imgSection .imgContainer .image .sticker{position:absolute;display:none;padding:0;background-color:transparent}.imgSection .imgContainer .image .text{position:absolute;border:none;outline:none;background-color:transparent;cursor:pointer;user-select:none;color:transparent}.imgSection .imgContainer .pointerBox{width:41px;height:41px;position:absolute}.imgSection img{width:250px}.imgSection .colorsExtraction{display:flex;gap:10px;flex-wrap:wrap;border:2px solid black;background-color:#ffffff80;justify-content:center;margin:20px;box-shadow:0 0 4px 1px #0000004d}.imgSection .colorsExtraction .box{display:flex;gap:15px;margin:10px}.imgSection .colorsExtraction .box div{width:130px;height:100px;display:flex;flex-direction:column;justify-content:space-between;padding:10px;font-size:12px;color:#fff;font-weight:700}@media (max-width: 779px){.imgSection{min-width:calc(100vw - 17px)}}.cropArea{position:absolute;border:2px dashed red;z-index:2;display:flex;justify-content:center;align-items:center;background-color:#ffffff4d}.cropArea input{max-width:100%;border:none;background-color:transparent;outline:none;align-self:flex-start}.cropArea .hidden{position:absolute;width:80%;height:80%;top:10%;left:10%;cursor:move}.cropArea .corners{position:absolute;width:12px;height:4px;z-index:3}.cropArea .corners.BR{bottom:0;right:0;cursor:se-resize}.cropArea .corners.BL{bottom:0;left:0;cursor:nesw-resize}.cropArea .corners.TR{top:0;right:0;cursor:nesw-resize}.cropArea .corners.TL{top:0;left:0;cursor:nwse-resize}.cropArea .sides{position:absolute}.cropArea .sides.right{width:10%;height:80%;top:10%;left:90%;cursor:e-resize}.cropArea .sides.left{position:absolute;width:10%;height:80%;top:10%;left:0;cursor:w-resize}.cropArea .sides.top{width:80%;height:10%;top:0;left:10%;cursor:n-resize}.cropArea .sides.bottom{width:80%;height:10%;top:90%;left:10%;cursor:s-resize}.filters{flex:1;display:flex;flex-direction:column}.filters ul{display:flex;list-style:none;flex-direction:column;gap:10px;padding:20px}.filters ul li{display:flex;flex-direction:column;gap:10px}.filters button{margin-top:10px}.re-size{display:flex;flex-direction:column;gap:20px;padding:0 20px 20px;font-size:16px;flex:1}.re-size div{display:flex;justify-content:space-between}.re-size div input{width:50px;background-color:#00f;color:#fff;padding-left:5px;border:0;outline:0}.re-size .ratio input{width:25px;background-color:#00f;color:#fff;padding-left:10px;border:0;outline:0}.re-size button{padding:10px 20px}.shape{display:flex;flex-direction:column;gap:20px;padding:20px;font-size:16px;flex:1}.shape h2{align-self:center}.shape .shapes-container{display:flex;flex-direction:column;gap:20px;align-items:center;height:350px;overflow-y:scroll;border:10px solid rgba(3,32,74,.9);border-radius:20px;border-right:none;padding:10px;width:200px;margin:0 auto}.shape .shapes-container::-webkit-scrollbar{width:10px}.shape .shapes-container::-webkit-scrollbar-track{background:rgba(3,32,74,.9)}.shape .shapes-container::-webkit-scrollbar-thumb{background-color:#031733e6;border-radius:10px;border:3px solid black}.shape img{width:70px;height:70px;cursor:pointer}.sticker{display:flex;flex-direction:column;gap:20px;padding:10px;font-size:16px;flex:1}.sticker h2{align-self:center}.sticker .width,.sticker .height{display:flex;padding:0 20px;gap:10px;font-size:20px;justify-content:space-between}.sticker .width input,.sticker .height input{width:60px;background-color:#00f;color:#fff;padding-left:5px;outline:none;border:none}.sticker .stickerContaier{display:flex;flex-direction:column;gap:20px;align-items:center;height:260px;overflow-y:scroll;border:10px solid rgba(3,32,74,.9);border-radius:20px;border-right:none;padding:10px;width:200px;margin:0 auto}.sticker .stickerContaier::-webkit-scrollbar{width:10px}.sticker .stickerContaier::-webkit-scrollbar-track{background:rgba(3,32,74,.9)}.sticker .stickerContaier::-webkit-scrollbar-thumb{background-color:#031733e6;border-radius:10px;border:3px solid black}.sticker .stickerContaier img{width:50px;height:40px;cursor:pointer}.transform{display:flex;flex-direction:column;gap:20px;padding:0 20px 20px;font-size:16px;flex:1;align-items:center}.transform .inputField{display:flex;justify-content:space-between;font-size:20px;width:100%;gap:5px;align-items:center}.transform input{width:50px;padding:5px;font-size:16px;outline:none;height:28px;background-color:#00f;color:#fff;border:none}.transform button{font-size:16px;width:100%}.textSection{display:flex;flex-direction:column;gap:20px;padding:10px 10px 20px;font-size:16px;flex:1}.textSection h3{font-size:16px;align-self:center}.textSection .type{display:flex;align-items:center;justify-content:space-between;gap:10px}.textSection .type button{padding:5px 10px;font-size:16px;cursor:pointer}.textSection .type button.active{background-color:gold;border:2px solid gold}.textSection .fontProp{display:flex;flex-direction:column;width:100%}.textSection .fontProp h3{font-size:16px}.textSection .fontProp .part1{font-size:16px;padding:10px;display:flex;justify-content:space-between}.textSection .fontProp .part2 .progressBar{margin:10px;width:calc(100% - 20px);height:5px;position:relative;display:flex;align-items:center}.textSection .fontProp .part2 .progressBar .value-bar{height:4px;background-color:#09c;z-index:2}.textSection .fontProp .part2 .progressBar .circle{width:20px;height:20px;border-radius:50%;background-color:#09c;z-index:2;position:absolute;cursor:pointer}.textSection .fontProp .part2 .progressBar .transperantLine{width:100%;height:4px;position:absolute;background-color:#c0bbbb}.textSection .font{padding:10px 0;display:flex;justify-content:space-between}.textSection .font label{font-size:20px}.textSection .font select{font-size:16px;background-color:#00f;color:#fff;border:none;outline:none}.textSection .fontWeight{padding:10px 0;display:flex;justify-content:space-between}.textSection .fontWeight label{font-size:20px}.textSection .fontWeight select{font-size:16px;background-color:#00f;color:#fff;border:none;outline:none}.textSection .custom-color{display:flex;width:100%;align-items:center;flex-direction:column;gap:20px}.textSection .custom-color h3{font-size:20px}.textSection .custom-color .colors-container{display:flex;gap:10px}.textSection .custom-color .colors-container div{width:30px;height:30px;border-radius:50%;overflow:hidden}.textSection .custom-color .colors-container div.active{width:35px;height:35px}.textSection .custom-color .colors-container div input{border:0;padding:0;width:200%;height:200%;cursor:pointer;transform:translate(-25%,-25%)}.toolBar{background-color:#fff;box-shadow:0 4px 8px 3px #03204a80;background-color:#03204ae6;display:flex;justify-content:center;padding:10px 20px}.toolBar ul{list-style:none;display:flex;gap:20px;color:#00a7ff;flex-wrap:wrap}.toolBar ul li{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer}.toolBar ul li svg,.toolBar ul li span{pointer-events:none}.instructions{display:flex;flex-direction:column;gap:20px;padding:20px;font-size:18px;color:#00a7ff}.instructions p span{color:#76f576}.options{display:flex;flex-direction:column}.options .upload{padding:10px;background-color:#000b9d;background-color:#031733e6;color:#00f;gap:5px;justify-content:center;font-size:20px;cursor:pointer;width:100%;display:flex;align-items:center;margin-bottom:3px}.options .upload .UploadIcon{color:#00f}.options .upload input{display:none}.options .down{display:flex;width:100%;gap:3px}.options .down button{display:flex;flex-direction:column;align-items:center;padding:5px 10px;background-color:#031733e6;gap:3px;cursor:pointer;flex:1}.options .down .download{color:orange;background-color:#031733e6}.options .down .download .DownloadIcon{color:orange}.options .down .save{color:#76f576;background-color:#031733e6}.options .down .save .SaveIcon{color:#76f576}.options .down .delete{color:red;background-color:#031733e6}.options .down .delete .DeleteIcon{color:red}.options .down button{border:none;background-color:#000218;color:#00a7ff}.help{background-color:#2121a1;min-height:100vh;padding:20px}.help .container{padding:20px;display:flex;flex-direction:column;gap:20px;box-shadow:0 0 4px 1px #0000004d}.help .container p{color:#4f4f4f;line-height:1.5}.help .container div{display:flex;flex-direction:column;gap:10px}.help .container div .together{display:grid;grid-template-columns:repeat(auto-fit,200px);gap:50px;justify-content:center}.help .container h2{align-self:center}.help .container img{width:200px;align-self:center}.help .container img.big,.help .note img{width:320px}.examples{background-color:#2121a1;min-height:100vh;padding:20px}.examples .container{padding:20px;display:flex;flex-direction:column;gap:20px;box-shadow:0 0 4px 1px #0000004d}.examples .container h1{align-self:center}.examples .container p,.examples .container span{color:#636262}.examples .container section{display:flex;flex-direction:column;gap:5px;align-items:center;margin-bottom:20px}.examples .container section h2{padding-bottom:10px;font-size:28px}.examples .container section .box{width:100%;max-width:700px;border:3px solid black;padding:20px;display:flex;flex-direction:column;gap:20px}.examples .container section .box figure{display:flex;flex-direction:column;gap:5px;align-items:center}.examples .container section .box .imagesContainer{width:100%;display:grid;grid-template-columns:repeat(auto-fit,200px);gap:20px;justify-content:center;align-items:center}.examples .container img{width:200px}*{padding:0;margin:0;box-sizing:border-box;scroll-behavior:smooth}