*,*::before,*::after{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}:root{--clr-font:rgb(49,49,49);--clr-bkg-button:rgb(161,161,161)}body,button{font-family:sans-serif;color:var(--clr-font)}path,i,svg{pointer-events:none}.colors{min-height:80vh;display:-webkit-box;display:-ms-flexbox;display:flex;color:rgb(200,200,200)}.color{height:80vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden}.color h2{font-size:2rem;cursor:pointer}.color h2::before{content:"Click to copy!";position:absolute;-webkit-transition:all 500ms ease;-o-transition:all 500ms ease;transition:all 500ms ease;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0;font-size:1.5rem;text-align:center;width:15rem;height:5rem;background:#fff;color:#000;top:20%;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border-radius:.5rem}.color h2:hover::before{opacity:60%}.sliders{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;background:#fff;pointer-events:none;bottom:0;padding:1rem;width:80%;opacity:0;border-top-left-radius:1rem;border-top-right-radius:1rem;-webkit-transform:translateY(150px);-ms-transform:translateY(150px);transform:translateY(150px);-webkit-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out}.sliders.active{pointer-events:all;opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.sliders button{position:absolute;top:0;right:0;padding:.2rem .5rem;background:var(--clr-bkg-button);border-top-right-radius:1rem;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;border:none;color:var(--clr-font);cursor:pointer}.sliders input[type="range"]{-webkit-appearance:none;margin:1rem 0rem;width:100%;position:relative;border-radius:1rem;cursor:pointer}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;-webkit-box-shadow:1px 1px 1px var(--clr-font);box-shadow:1px 1px 1px var(--clr-font);border:1px solid var(--clr-font);height:1rem;width:1rem;border-radius:3px;background:var(--clr-font);cursor:pointer}input[type="range"]::-webkit-slider-runnable-track{border-radius:1rem;border:none;height:1.2rem}.controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.adjust,.lock{font-size:2rem;border:none;background:none;cursor:pointer;margin:2rem 0rem}.panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;height:20vh}.panel button,.submit-save{font-size:1.2rem;margin:1rem;padding:1rem 2rem;background:var(--clr-bkg-button);color:#000;border:none;cursor:pointer;border-radius:1rem}.panel p{font-size:1.2rem}.library-panel,.generate-panel,.save-panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.copy-container,.save-container,.library-container{position:fixed;top:0;left:0;background:rgba(0,0,0,.4);width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;opacity:0;pointer-events:none}.copy-container.active,.save-container.active,.library-container.active{opacity:1;pointer-events:all}.copy-popup,.save-popup,.library-popup{background:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:2rem;-webkit-transition:-webkit-transform 500ms ease;transition:-webkit-transform 500ms ease;-o-transition:transform 500ms ease;transition:transform 500ms ease;transition:transform 500ms ease,-webkit-transform 500ms ease;-webkit-transform:translateY(-2rem);-ms-transform:translateY(-2rem);transform:translateY(-2rem);min-width:20%;min-height:20%;padding:2rem}.copy-popup,.save-popup{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.library-popup{min-width:40%;height:40vh;overflow-y:scroll;padding:2.5rem}.copy-popup.active,.save-popup.active,.library-popup.active{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.copy-popup h4,.save-popup h4,.library-popup h4{font-size:2rem;color:var(--clr-font);padding:2rem 0rem;padding-bottom:3rem}.close-save,.library-popup button{position:absolute;top:0%;right:0%;padding:.2rem .5rem;background:var(--clr-bkg-button);border-top-right-radius:2rem;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;border:none;color:var(--clr-font);cursor:pointer}.save-popup input{font-size:2rem;padding:1rem .5rem;text-align:center;font-weight:bolder}.color-palette-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:background 700ms ease;-o-transition:background 700ms ease;transition:background 700ms ease}.color-palette-container:hover{background:rgba(0,0,0,.3)}.color-palette-container p{font-size:1.7rem;padding:.5rem 0rem;color:var(--clr-font)}.color-preview-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;pointer-events:none;margin-bottom:5rem}.library-preview-color{height:5rem;width:10rem;pointer-events:none}@media screen and (max-width:768px){.color h2{font-size:1.6rem}.all-color-palettes,.library-popup,.save-popup{width:80%}.save-popup{height:40%;padding:2.5rem}.save-palette-name{width:90%}.save-popup h4{text-align:center}}