*{padding:0;margin:0;scroll-behavior:smooth;box-sizing:border-box}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular-dKSYcarW.ttf);font-style:normal;font-weight:400}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Bold-DwCw38g9.ttf);font-weight:700;font-style:normal}body{font-family:Montserrat,sans-serif;background-color:#f0f0f0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:3rem}body #root{height:100%;min-width:700px}h1{font-weight:700;font-size:2rem;line-height:1.5}.btn{border:none;font-size:1rem;background:transparent;cursor:pointer}.btn:focus{outline:none}.header{display:flex;gap:1rem;justify-content:center}.header img{width:3rem;aspect-ratio:1/1}.options{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;width:100%}.max-width{width:30%;position:relative;background:#fff;border-radius:1rem;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:.5rem}.max-width input{border:none;font-size:1rem;padding:.5rem 1rem;width:100%;border-radius:.5rem;background:#f0f0f0;font-family:Montserrat,sans-serif}.max-width input:focus{outline:none}.max-width input::placeholder{color:gray}.max-width:before{content:"";position:absolute;z-index:-1;bottom:0;right:-1rem;width:1rem;height:1rem;background:transparent;border-bottom-left-radius:1rem;box-shadow:-.5rem .5rem 0 .5rem #fff}.mimetype-select{width:50%}.mimetype-select .buttons{position:relative;display:flex;justify-content:center;align-items:center;border-radius:1rem;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:.5rem;gap:.5rem;background:#fff}.mimetype-select .buttons .btn{border:none;font-size:1rem;padding:.5rem 1rem;font-weight:700;cursor:pointer;width:33%;background:transparent;transition:.3s;transition-delay:.2s;z-index:1}.mimetype-select .buttons .btn.active{color:#fff}.mimetype-select .buttons .current{background:#f26e22;width:calc(33% - .5rem);height:calc(100% - 1rem);border-radius:.5rem;position:absolute;top:.5rem;transition:.3s}.mimetype-select .buttons:before{content:"";position:absolute;bottom:0;left:-1rem;width:1rem;height:1rem;background:transparent;border-bottom-right-radius:1rem;box-shadow:.5rem .5rem 0 .5rem #fff}input[type=file]{display:none}.file-select{width:100%;display:flex;justify-content:center;align-items:center;gap:1rem;flex-direction:column;background:#fff;border-radius:1rem;border-top-right-radius:0;border-top-left-radius:0;padding:.5rem;position:relative}.file-select-area{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;padding:2rem 1rem;flex-direction:column;background:#f0f0f0;border-radius:1rem;transition:.3s;cursor:pointer}.file-select img{width:3rem;aspect-ratio:1/1}.file-select p{font-size:1.5rem}.file-select.loading:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;background:#00000065;border-radius:1rem;z-index:3}.file-select.loading:after{position:absolute;content:"";top:50%;left:50%;width:3rem;height:3rem;transform:translate(-50%,-50%);background:url(./icon-loader.svg) no-repeat center;background-size:cover;z-index:4}.resized-images{display:flex;flex-direction:column;gap:.5rem;margin-top:2rem;background:#fff;border-radius:1rem;padding:1rem}.resized-images__item{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.resized-images__item .name{font-size:1rem;font-weight:700;margin-bottom:.25rem}.resized-images__item .size{font-size:.75rem;color:gray}.resized-images__item .options{display:flex;gap:.5rem;width:fit-content;margin-top:0}.resized-images__item a{text-decoration:none}.resized-images__item button{font-size:1rem;padding:.5rem 1.25rem;border:none;background:#f26e22bf;color:#fff;cursor:pointer;border-radius:.5rem;display:flex;gap:.5rem;align-items:center;transition:.3s}.resized-images__item button img{width:1.25rem;aspect-ratio:1/1}.resized-images__item button:hover{background:#f26e22}.resized-images__item button.remove{background:#ff0000bf;padding:.5rem}.resized-images__item button.remove:hover{background:red}.resized-images__item button.blue{background:#0051ffbf;color:#fff;padding:.5rem}.resized-images__item button.blue:hover{background:#0051ff}.resized-images__item button.gray{background:#696969bf;color:#fff}.resized-images__item button.gray svg{animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.resized-images__item:not(:last-child){padding-bottom:.5rem;border-bottom:1px dashed black}dialog{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:none;z-index:10;display:flex;justify-content:center;align-items:center}dialog .modal{width:100%;max-width:700px;background:#fff;border-radius:1rem;padding:2rem;display:flex;flex-direction:column;gap:1rem;position:relative}dialog .modal .modal__header{display:flex;justify-content:space-between;align-items:center;gap:1rem}dialog .modal .modal__header h2{font-size:1.5rem;font-weight:700}dialog .modal .modal__header .modal__close{background:transparent}dialog .modal .modal__content{display:flex;flex-direction:column;gap:1rem;justify-content:center}dialog .modal .modal__content img{max-width:100%;max-height:500px;border-radius:1rem}dialog .modal .modal__content .img{width:fit-content;margin:auto;display:flex;justify-content:center;align-items:center;position:relative}dialog .modal .modal__content .img .tag{position:absolute;top:.5rem;right:.5rem;background:#f26e22;color:#fff;text-transform:uppercase;padding:.25rem .5rem;border-radius:.5rem;font-size:.75rem}dialog .modal .modal__content .img.processing{position:relative}dialog .modal .modal__content .img.processing img{opacity:.3}dialog .modal .modal__content .img.processing .loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;animation:rotate 1s linear infinite;transform-origin:top left}@keyframes rotate{0%{transform:rotate(0) translate(-50%,-50%)}to{transform:rotate(360deg) translate(-50%,-50%)}}dialog .modal .modal__content .controls{display:flex;justify-content:space-between;align-items:center;gap:1rem}dialog .modal .modal__content .controls .btn{padding:.75rem;width:100%;color:#fff;border-radius:.5rem;transition:.3s;font-weight:700}dialog .modal .modal__content .controls .close{background:#ff0000bf}dialog .modal .modal__content .controls .close:hover{background:red}dialog .modal .modal__content .controls .remove{background:#0051ffbf}dialog .modal .modal__content .controls .remove:hover{background:#0051ff}