*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;outline-color:rgba(0,0,0,0);list-style:none;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}body{width:100vw;height:100vh;overflow:hidden;background:#99adc0;overflow-y:auto;display:flex;flex-direction:column;justify-items:center;justify-content:center;align-items:center;align-content:center;gap:1rem;flex-wrap:wrap}.copied,.copy-error{position:fixed;right:-100%;top:1rem;background:#fff;padding:.5rem .8rem;color:green;font-style:italic;font-weight:bold;font-size:1.2rem;transition:.1s}.copied.copy-error,.copy-error.copy-error{color:red}.copied.copy-error.active,.copy-error.copy-error.active{right:0}.copied.copy-error.active::after,.copy-error.copy-error.active::after{content:"";position:absolute;height:.1rem;width:100%;background:red;bottom:0;left:0;animation:decWidth 1s}@keyframes decWidth{0%{width:100%}10%{width:90%}20%{width:80%}30%{width:70%}40%{width:60%}50%{width:50%}60%{width:40%}70%{width:30%}80%{width:20%}90%{width:10%}100%{width:0%}}.copied.active,.copy-error.active{right:0}.copied.active::after,.copy-error.active::after{content:"";position:absolute;height:.1rem;width:100%;background:green;bottom:0;left:0;animation:decWidth 1s}main{width:90%;max-width:25rem;height:85%;max-height:10rem;background:rgba(133,156,0,.4862745098);border-radius:.5rem;box-shadow:0 0 .3rem .1rem rgba(0,0,0,.6352941176);display:grid;grid-template-rows:1fr auto}main .actions{padding:1rem}main .actions .color-copier{display:flex;justify-content:space-between;align-items:center;gap:.4rem;padding-bottom:.4rem;border-bottom:1px solid rgba(0,0,0,.137254902)}main .actions .color-copier .color-code{background:rgba(173,173,173,.8352941176);width:fit-content;padding:.5rem;border-radius:.2rem;color:#002e2e;max-width:18rem;overflow-x:auto;font-size:.8rem}main .actions .color-copier .copy{width:2rem;height:2rem;border-radius:.2rem;cursor:pointer;background:rgba(173,173,173,.8352941176);display:grid;place-items:center}main .actions .color-copier .copy .ico{color:#1f1d1d}main .actions .color-adder{display:grid;gap:.5rem}main .actions .color-adder .num-of-colors{height:1.5rem;border:none;box-shadow:none;outline:none;padding:.2rem;caret-color:red}main .actions .color-adder .color-pickers{display:flex;justify-content:space-between;gap:.5rem}main .actions .color-adder .color-pickers input{width:100%;max-width:4rem;border:none;appearance:none;border-radius:1rem;background:none;cursor:pointer;min-height:2rem}main .actions .color-adder .error{width:100%;background:red;color:#f5f5f5;border-radius:.2rem;padding-left:.2rem}select{width:90%;max-width:25rem;padding:.5rem;border-radius:.3rem;cursor:pointer;border:none;background:rgba(255,255,255,.4235294118)}/*# sourceMappingURL=style.css.map */