:root{color-scheme:dark light;font-family:system-ui}*,*:before,*:after{box-sizing:border-box}html{height:fit-content;width:fit-content}body{height:100vh;width:100vw;min-width:500px;min-height:385px;margin:0 auto;display:flex;flex-direction:column;overflow:auto}*{-webkit-user-select:none;user-select:none}#input,#result{-webkit-user-select:initial;user-select:initial}#title{min-height:160px;height:160px;width:100%;justify-content:center;align-items:center;display:flex;flex-direction:column;position:relative}#title #gradient{position:absolute;height:100vh;min-height:385px;width:100%;top:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent);mask-image:linear-gradient(to bottom,black 60%,transparent);background:var(--bg);z-index:-1;overflow:hidden;--bg: #063a;transition:all .3s ease}#title #base{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:60px 0;rotate:var(--rotation);transition:rotate .3s ease}#title #base div{height:fit-content;width:fit-content}#title #base #dec-to-hex{rotate:180deg}#title #base h1,#title #base h3{line-height:0}main{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:120px}main #options{height:48px;width:600px;max-width:80%;min-width:500px;justify-content:center;align-items:center;gap:64px;margin-top:-16px;margin-bottom:16px;display:flex}main #options #convert{display:flex;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:600;cursor:pointer}main #options #convert *{pointer-events:none}main #options #convert input{display:none}main #options #convert #convert-indicator{height:32px;width:56px;background:#1c1e1f;border-radius:9999px;position:relative}main #options #convert #convert-indicator:before{content:"";height:calc(100% - 8px);aspect-ratio:1;border-radius:999px;background:#b4b4b4b4;left:5px;position:absolute;transition:left .3s ease}main #options #convert input:checked~#convert-indicator:before{left:27px}main #options #isColor{height:32px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:600;cursor:pointer}main #options #isColor input{scale:1.4}main div{justify-content:center;align-items:center;display:flex;max-width:100%;gap:12px}#input{height:60px;width:600px;max-width:80%;background:#1c1e1f;border:0;border-radius:8px;padding:0 16px;font-size:16px}#input:focus{outline:0}#result{height:40px;width:fit-content;min-width:200px;color:#d3d3d3;display:flex;justify-content:center;align-items:center}