body{font-family:Inter,sans-serif;margin:0}*{box-sizing:border-box}.color-sheme-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100vw;height:auto;overflow:hidden}.color-sheme-header{display:flex;flex-direction:column;justify-content:center;margin:0 auto;width:100vw;padding:1em;gap:1em}.color-input{display:flex;width:100vw}input[type=color]{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:none;border:4px solid #D1D5DB;border-radius:4px;cursor:pointer;height:2.5em;padding:0;width:4em}*:focus{border-radius:0;outline:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-color-swatch{border:0;border-radius:0}::-moz-color-swatch,::-moz-focus-inner{border:0}::-moz-focus-inner{padding:0}.color-sheme-select{border:1px solid #D1D5DB;padding:.5em;border-radius:4px;flex:1}.color-sheme-select,.get-btn,.btn-hex{font-family:inherit}.get-btn{padding:.5em 1em;border:1px solid #D1D5DB;border-radius:4px;background-color:#fff}.get-btn:hover{box-shadow:#a9a9a9 0 0 5px}.color-shemes,.color-hex{display:flex}.color-shemes{width:100%;height:80vh;gap:0em;display:none}.color-hex{height:100%;width:100%}.btn-hex{margin:1em;font-size:.7em;box-sizing:border-box;overflow:hidden;background-color:#fff}.btn-color,.btn-hex{padding:0;width:100vw;border:none}.toast{border:1px solid green;font-size:.5em;color:green;background:#fff;border-radius:4px;padding:.5em;box-shadow:0 0 5px gray;position:absolute;z-index:50;display:none}@media only screen and (min-width: 768px){.toast,.btn-hex{font-size:1em}.color-sheme-header{flex-direction:row;margin:0 auto;padding:1em;gap:1em}}@media only screen and (min-width: 1024px){.color-sheme-container{width:50vw;margin:1em auto;border:1px solid #D1D5DB;border-radius:4px}.color-sheme-header{flex-direction:row;margin:0 auto;width:50vw;padding:1em;gap:1em}}