body{margin:0;padding:0;background-color:#000;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--fg:#fff;--bg:#000;--fc:#0b0e0f;--radc:#0dff92}.App{justify-content:space-around}.App,.controller{display:flex;align-items:center}.controller{flex-direction:column;min-height:800px}.color-picker{width:300px;display:flex;background-color:var(--fg);padding:6px;border-radius:30px;font-weight:300}.range{height:380px;position:relative}.range p{font-size:42px;color:var(--fg);position:absolute;right:-80px;top:100px}.color-picker input{display:inline-block;outline:none;border:none;box-sizing:border-box;height:52px;width:52px;background-color:var(--fg);border-radius:30px;color:var(--fc)}.color-picker input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}.color-picker input[type=color][disabled],.color-picker input[type=text][disabled]{opacity:.2;cursor:not-allowed}.color-picker input[type=text]{width:200px;padding:6px 16px;font-size:32px}.controller input[type=range]{margin-top:30px;width:320px;height:320px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.controller input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:none;border-radius:30px;box-shadow:0 0 0 .3em var(--bg);background:var(--fg);-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-transition:-webkit-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out}.controller input[type=range]::-webkit-slider-thumb:active,.controller input[type=range]::-webkit-slider-thumb:focus{-webkit-appearance:none;appearance:none;-webkit-transform:scale(.8);transform:scale(.8)}.color-list{height:800px}.color-list .color-item{width:200px;text-align:center;list-style:none}.radios{display:block;position:relative;margin:40px auto;height:auto;padding:20px}.radios ul{margin:0;padding:0;overflow:auto;display:flex}.radios ul li{color:#aaa;display:block;position:relative;float:left;width:100%;height:100px;border-bottom:1px solid #333}.radios ul li input[type=radio]{position:absolute;visibility:hidden}.radios ul li label{display:block;position:relative;font-weight:300;font-size:1.35em;padding:25px 25px 25px 80px;margin:10px auto;height:30px;z-index:9;cursor:pointer;-webkit-transition:all .25s linear}.radios ul li:hover label{color:var(--fg)}.radios .check{display:block;position:absolute;border:5px solid #aaa;border-radius:100%;height:25px;width:25px;top:30px;left:20px;z-index:5;transition:border .25s linear;-webkit-transition:border .25s linear}.radios ul li:hover .check{border:5px solid var(--fg)}ul li .check:before{display:block;position:absolute;content:"";border-radius:100%;height:15px;width:15px;top:5px;left:5px;margin:auto;transition:background .25s linear;-webkit-transition:background .25s linear}input[type=radio]:checked~.check{border:5px solid var(--radc)}input[type=radio]:checked~.check:before{background:var(--radc)}input[type=radio]:checked~label{color:var(--radc)}
/*# sourceMappingURL=main.547a0b16.chunk.css.map */