@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";#root{max-width:1280px;margin:0 auto;padding:1rem;text-align:center}*{margin:0;padding:0;box-sizing:border-box;outline:none}body{display:grid;align-items:center;justify-content:left;height:100vh;background:#f6f6f6;font-family:Inter}.form__group{margin:0;padding:0}:root{--primary: #3262ff;--secondary: #c2c7ca;--light: #f6f6f6;--dark: #000;--success: #58cd6a}.export__container{width:fit-content;height:fit-content;background:white}.main__image__container{display:grid;place-items:center;position:relative}.fire__icon{background-image:radial-gradient(at 38% 13%,hsla(28,100%,74%,1) 0px,transparent 50%),radial-gradient(at 66% 36%,hsla(189,100%,56%,1) 0px,transparent 50%),radial-gradient(at 0% 50%,hsla(355,100%,93%,1) 0px,transparent 50%),radial-gradient(at 45% 68%,hsla(340,100%,76%,1) 0px,transparent 50%),radial-gradient(at 0% 100%,hsla(22,100%,77%,1) 0px,transparent 50%),radial-gradient(at 80% 100%,hsla(242,100%,70%,1) 0px,transparent 50%),radial-gradient(at 0% 0%,hsla(343,100%,76%,1) 0px,transparent 50%);color:#fff;border-radius:10px}.exported__image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:10px;transition:.3s;opacity:0}.main__image__shadow{width:600px;height:335px;box-shadow:0 0 20px #00000016;border-radius:10px;transition:.3s}.main__image{width:100%!important;height:100%!important;border-radius:10px;background-position:center;transition:.3s}.controls{position:fixed;top:0;bottom:0;right:0;background:white;border-left:solid 1px #e6e6e6;width:250px;overflow-y:auto;padding:10px 20px;text-align:left;z-index:9999999999}.controls::-webkit-scrollbar{width:5px}.controls::-webkit-scrollbar-track{background:#f1f1f1}.controls::-webkit-scrollbar-thumb{background:rgb(0,0,0);border-radius:50px}.controls::-webkit-scrollbar-thumb:hover{background:#555}.gradients{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:200px;overflow:auto;padding:10px;margin-top:10px;margin-bottom:10px}.gradients::-webkit-scrollbar{width:5px}.gradients::-webkit-scrollbar-track{background:#f1f1f1}.gradients::-webkit-scrollbar-thumb{background:#888;border-radius:50px}.gradients::-webkit-scrollbar-thumb:hover{background:#555}.gradient{height:40px;border-radius:10px;cursor:pointer;border:none}.download__button{border:none;border-radius:10px;height:40px;width:100%;padding-left:15px;padding-right:15px;background-color:#000;color:#fff;font-size:14px;font-weight:600}.download__button svg{margin-right:10px;width:18px;height:18px}.form__title{font-size:16px;font-weight:600;margin-bottom:10px}.form__group{display:flex;gap:10px;margin-bottom:10px}.form__group label{font-size:12px;font-weight:400;margin:0;padding:0}.form__group__element{text-align:left;width:100%}select{border:solid 2px #e3e3e3;border-radius:10px;font-size:12px;font-weight:600;width:100%;color:#000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(0, 0, 0)' d='M10 13.5L4.5 8h11z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px top 50%;background-size:15px;padding:5px 10px;margin:0}.hor{display:flex;align-items:center;gap:10px}input[type=color]{padding:0;width:50px;border-radius:20px;-webkit-appearance:none;border:none;width:40px;height:40px}.color__picker{position:relative;display:inline-block;width:40px;height:40px;border-radius:10px;border:solid 2px var(--secondary);background:#fff;cursor:pointer;margin:0;padding:0}.color__picker__picker__bg{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.color__picker__picker{position:absolute;top:100%;right:0;cursor:pointer;z-index:10000}.color__picker__picker .react-colorful{height:100px;width:100px}.color__picker__picker .react-colorful__saturation{border-radius:4px 4px 0 0}.your-component .react-colorful__hue{height:10px;border-radius:0 0 4px 4px}.plain__input{display:inline-block;width:80px;margin:0;border:none;background:var(--light);border-radius:5px;font-size:13px;padding:5px 7px;height:25px}.input{display:inline-block;width:100%;margin:0;border:none;background:var(--light);border-radius:5px;font-size:13px;padding:5px 7px;height:25px}.w-100{width:100%}.image__input__area{display:inline-block;width:100%;margin:0;border:none;background:var(--light);border:dashed 2px #e3e3e3;border-radius:5px;font-size:13px;padding:5px 7px;height:70px;resize:none}.main__image__input{width:60vw;height:600px;background:rgb(255,255,255);border:dashed 2px #b9b9b9;border-radius:20px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;left:20px;cursor:pointer}.image_icon{font-size:200px;color:var(--light)}.keyboard__button{display:inline;background:var(--light);border-radius:5px;font-size:13px;padding:5px 7px;height:25px}.instructions{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:16px;font-weight:600;color:#acacac}input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:5px;background:#e4e4e4;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.gradient__add__btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:8px;border:none;background:#0d0d17;color:#fff}.gradient__input{z-index:2;border-radius:10px;padding:10px 40px 10px 10px;border:solid 2px #e3e3e3;color:#000;width:100%;background:var(--light);font-size:11px}.select{position:relative;display:inline-block;width:100%;margin:0;border:none;border-radius:5px;font-size:13px}.selected{padding:10px;cursor:pointer;border-radius:10px;background:#f3f3f3;font-weight:600}.selected:after{content:"";position:absolute;top:50%;right:5%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid black}.options{position:absolute;top:100%;left:0;width:100%;z-index:1000;background:#ffffff;border-radius:10px;border:solid 2px #e3e3e3;box-shadow:0 10px 20px #0000002e;padding:5px;display:grid;gap:5px}.select__option{padding:10px;width:100%;cursor:pointer;border:solid 2px #f8f8f8;border-radius:10px;font-weight:600}.select__option:hover{background:#f7f6f6}.cursor-pointer{cursor:pointer}@media (max-width: 768px){.controls{width:100%;top:60%}.maker__tag{position:fixed;top:10px;bottom:auto!important}.main__image__input{top:0;left:0;width:100%;height:100%;border-radius:0}}.main__nav{position:fixed;top:10px;left:30px;display:flex;gap:10px;border-radius:10px}.main__nav__button{border:none;border-radius:10px;color:#000}.main__nav__button svg{width:30px;height:30px;background:transparent;fill:none;stroke:#000;padding:4px}.input__form__container{position:relative;background:red;min-height:100px}.input__form__container .image__input__label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;padding:5px 10px;color:#000;background:var(--light);border-radius:5px;z-index:1;white-space:nowrap;font-weight:700;cursor:pointer}.input__form__container textarea{position:absolute;top:0;bottom:0;left:0;right:0;background:transparent;resize:none;border:none;padding:10px}.tiny__label{font-size:12px;color:#000;line-height:1}.made__with__love{width:100%;text-align:center;font-size:12px;color:#000;line-height:1;margin-top:40px;margin-bottom:20px}.made__with__love a{color:#000}