.preview{grid-template-columns:1fr 2fr;display:grid}.preview__title{font-size:1.1rem;font-weight:700}.preview__colors{flex-direction:column;display:flex}.preview__label{margin-bottom:.2rem}.preview__input{width:200px;height:2rem;margin-bottom:.3rem;padding-left:1rem}.preview__paragraph{padding:1rem}.hsla-field{grid-template-columns:4rem 4rem 3rem 3rem 3rem;display:grid;position:relative}.hsla-field__label{justify-content:space-between;align-items:center;display:flex}.hsla-field__label button{margin-right:.5rem}.hsla-field__label button:focus{outline:none}.hsla-field label{text-align:right;margin-right:1rem;font-size:1.2rem}.hsla-field__tooltip{z-index:9;background-color:#fff;border:1px solid #ddd;border-radius:.4rem;max-width:400px;padding:1rem;position:absolute;top:0;left:1.6rem}.hsla-field input{padding:.4rem 0 .4rem 1rem}.hsla-field .field-suffix{margin-left:.5rem;font-weight:700}.hsla-field__minus,.hsla-field__plus{cursor:pointer;border-style:solid;border-width:1px;border-radius:.2rem}.hsla-field__minus{color:#5f0907;background-color:#f2cfcf;border-color:#5f0907}.hsla-field__plus{color:#2b3904;background-color:#e9f2cf;border-color:#2b3904}.copied-msg{color:#242f04;text-align:center;background-color:#d1f471;border:2px solid #242f04;border-radius:.4rem;min-width:16rem;padding:1rem 0;font-weight:700;position:fixed;bottom:2.5rem;left:50%;transform:translate(-50%)}.footer{color:#e39e35;letter-spacing:.1rem;background-color:#160f03;justify-content:center;align-items:center;width:100%;height:5rem;padding:1rem;display:flex}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:#f8f8f8;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}button{background-color:#0000;border:none;display:block}#__shades{min-width:96vw;min-height:100vh;padding:1px}.main{min-height:90vh;margin-bottom:4rem;display:grid}.base{width:200px;height:100px}.thongSo{padding:1rem}.color-value-text{cursor:pointer;width:min-content;padding:.2rem 0}.color-value-text:hover{font-weight:700}.colorValues{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));height:-moz-fit-content;height:fit-content;display:grid}.value{width:auto;height:102px;padding:.5rem}.hidden{display:none}@media screen and (width>=700px){.main{grid-template-columns:1fr 1fr}.preview{grid-area:1/2}.colorValues{grid-area:2/1/auto/span 2;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}@media screen and (width>=1000px){.colorValues{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
/*# sourceMappingURL=index.290cf1ce.css.map */