*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,sans-serif}form{display:flex;align-items:center;gap:1em;padding:1em;background:#fff;box-shadow:0 4px 10px #00000010;position:fixed;width:100vw}#color-picker{border:none;width:4rem;height:3rem;flex-shrink:0;cursor:pointer}#color-scheme,#submit-btn{background:#fff;border:1px solid #D1D5DB;border-radius:.5em;padding:.5em .75em;cursor:pointer;transition:.2s}select{width:100%}#color-scheme:hover,#submit-btn:hover{background:#e3e3e3;transition:.2s}main{display:flex;align-items:stretch;height:100vh}.color-result{width:20vw;display:flex;flex-direction:column;justify-content:end}.color-hex-box{background-color:#fff;padding:.5em}h2{font-size:.75rem;font-weight:500;text-align:center;color:#2b283a;text-transform:uppercase}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}