*{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.center-both{display:flex;justify-content:center;align-items:center}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;font-family:Noto Sans Tangsa}.container{width:min(500px,100%)}h1{font-size:clamp(3em,5vw,4em);font-family:Kaushan Script,arial;color:#fff;line-height:1.1;margin-bottom:2rem;text-align:center;text-shadow:3px 2px 5px #311e1e}a{color:#f1f1f1;margin-top:2rem;display:block;filter:drop-shadow(1px 3px 2px rgb(83,83,83))}a:hover{color:#fff}#app{height:100vh;width:100%;margin:0 auto;padding:2rem;text-align:center}.card{background-color:#fff;padding:2rem 1rem 1rem;border-radius:1rem}.color-preview{height:3rem;border:1px solid rgb(188,188,188);border-radius:50rem;box-shadow:1px 1px 3px #8c8a8a;cursor:crosshair;position:relative}.color__handlers{height:100%;border-radius:50rem;overflow:hidden;position:relative;z-index:3}.color__handler{height:100%;position:absolute;left:var(--handler-position);width:5px;transform:translate(-2.5px);background-color:#1f1e1e9f}.color__handler:hover{cursor:col-resize}.color__handler-remover{width:1.2rem;border:1px solid #555;height:1.2rem;cursor:pointer;background-color:#fff;box-shadow:1px 1px 2px #ccc;border-radius:50%;position:absolute;top:-1.5rem;left:var(--handler-position);transform:translate(-50%)}.color__handler-remover:after{content:"x";color:#555;position:absolute;left:4px;top:-5px}.color__handler-remover:before{content:"";top:100%;position:absolute;width:1px;height:20px;z-index:1}.color__handler-remover:hover{border-color:#e54040}.color__handler-remover:hover:after{color:#e54040}.color__input{border:none;border-radius:50%;transform:translate(-2px,-2px)}.color__input-wrapper{width:1.3rem;height:1.3rem;border:1px solid white;border-radius:50%;overflow:hidden;border:.1rem solid white;outline:1px solid #bbb;position:absolute;left:var(--handler-position);cursor:pointer;top:110%;transform:translate(-50%)}.options{display:flex;gap:1rem}select,textarea{padding:.5rem;width:100%}select{background-color:#fff;border:1px solid #928b8b;border-radius:.5rem;margin-top:2rem}.css-box__header{border:1px solid #928b8b;display:flex;justify-content:space-between;padding:.5rem;margin-top:1rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem}.css-box__header h6{margin:0}textarea{border:none;border-bottom-left-radius:.5rem;border:1px solid #928b8b;border-top:none;border-bottom-right-radius:.5rem}#copied{display:none;color:green;margin-right:.5rem}.show{display:inline-block!important}#copy-css{color:#fff;background-color:#535bf2;padding:.3rem .5rem;border-radius:.4rem;cursor:pointer;border:none}#copy-css:hover{background-color:#6169ff}