@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap";a{color:initial;text-decoration:none}.grab{max-width:900px;width:70%;height:100%;margin:1rem auto}.container{min-height:30%;display:flex;align-items:center;justify-content:center}.input-group{position:relative;display:flex;align-items:center;justify-content:center;width:100%}.input-group button{all:unset;width:80%;font-size:1.5rem;border-radius:15px;padding:1rem;text-align:center;background-color:#415c78;color:#fff;cursor:pointer;box-shadow:0 1px gray}#upload{position:absolute;top:0;width:100%;height:100%;opacity:0;border:1px solid black}#image-canvas{max-width:450px;max-height:450px;display:none}#output{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}.outer{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:1rem}.display-image{max-width:90%;min-height:240px;border-radius:10px;box-shadow:0 0 10px #000}.wrapper{width:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;overflow:hidden;cursor:pointer}.color{width:50px;aspect-ratio:1;border-radius:50%;box-shadow:0 3px #000000b3}.hex{font-size:.7rem;padding:.3rem;border-radius:5px}@media screen and (max-width: 480px){.input-group button{font-size:1rem}}.loader-container{width:100%;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loader-container h1{color:gray}.loader{position:relative;width:200px;height:200px;border-radius:10rem;border:3px solid white;background:linear-gradient(gray,white);box-shadow:0 0 100px -50px #000;animation:animate 1s linear infinite}.loader:before{position:absolute;content:"";background:#fff;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;height:80%;border-radius:10rem;border:3px solid white;box-shadow:inset 0 0 100px -70px #111}@keyframes animate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footer-container{position:fixed;top:30%;left:0;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:1rem 2rem;box-shadow:0 0 5px gray;border-radius:0 10px 10px 0;gap:1rem}.footer-container span{writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap}.social{font-size:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (max-width: 480px){.footer-container{position:relative;flex-direction:row;border-radius:0}.footer-container span{writing-mode:horizontal-tb;text-orientation:upright;white-space:nowrap}.social{flex-direction:row;gap:1rem}}.header-container{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;align-items:center;justify-content:center;padding:1rem}.header-container h1{color:gray;font-size:5rem;text-align:center}@media screen and (max-width: 480px){.header-container h1{font-size:3rem}}:root{font-family:Poppins,Inter,Avenir,Helvetica,Arial,sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}#App{min-width:70%;min-height:100vh;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between}