@import url(https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;1,700&display=swap);
*{padding:0;box-sizing:border-box;margin:0}
body{font-family:Nunito,sans-serif;-webkit-font-smoothing:antialiased}
:root{--range_bk_color:rgb(255, 255, 255);--range_btn_color:rgb(81, 192, 243);--range_hover_color:rgb(223, 223, 223)}
.main_div{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}
.tool_box{width:400px;max-width:100%;min-height:400px;margin:40px auto;border-radius:3px;padding:40px 20px;font-size:.85em;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.05);box-shadow:0 0 15px 0 rgba(0,0,0,.05);background-color:#f4f7fc;transition:all ease-in .25s}
.code_display{border:1px solid;height:4rem;padding-left:.4rem}
.input_label{display:flex;align-items:center}
.color_input{justify-content:space-between}
input[type=range]{-webkit-appearance:none;margin:10px 0;width:100%}
input[type=range]:focus{outline:0}
input[type=range]::-webkit-slider-runnable-track{width:100%;height:12.8px;cursor:pointer;box-shadow:0 0 0 #000,0 0 0 #0d0d0d;background:var(--range_bk_color);border-radius:25px;border:0 solid #000101}
input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 #000,0 0 0 #0d0d0d;border:0 solid #000;height:20px;width:30px;border-radius:7px;background:var(--range_btn_color);cursor:pointer;-webkit-appearance:none;margin-top:-3.6px}
input[type=range]:focus::-webkit-slider-runnable-track{background:var(--range_hover_color)}
input[type=range]::-moz-range-track{width:100%;height:12.8px;cursor:pointer;box-shadow:0 0 0 #000,0 0 0 #0d0d0d;background:#ac51b5;border-radius:25px;border:0 solid #000101}
input[type=range]::-moz-range-thumb{box-shadow:0 0 0 #000,0 0 0 #0d0d0d;border:0 solid #000;height:20px;width:39px;border-radius:7px;background:#65001c;cursor:pointer}
input[type=range]::-ms-track{width:100%;height:12.8px;cursor:pointer;background:0 0;border-color:transparent;border-width:39px 0;color:transparent}
input[type=range]::-ms-fill-lower{background:#ac51b5;border:0 solid #000101;border-radius:50px;box-shadow:0 0 0 #000,0 0 0 #0d0d0d}
input[type=range]::-ms-fill-upper{background:#ac51b5;border:0 solid #000101;border-radius:50px;box-shadow:0 0 0 #000,0 0 0 #0d0d0d}
input[type=range]::-ms-thumb{box-shadow:0 0 0 #000,0 0 0 #0d0d0d;border:0 solid #000;height:20px;width:39px;border-radius:7px;background:#65001c;cursor:pointer}
input[type=range]:focus::-ms-fill-lower{background:#ac51b5}
input[type=range]:focus::-ms-fill-upper{background:#ac51b5}
@media screen and (max-width:480px){
.tool_box{width:400px;max-width:80%;min-height:400px}
.code_display{border:1px solid;height:5rem}
}