:root{--action: #03a9f4;--alternative: #fafafa;--alternative-darker: #ebf7fc;--dark: #222;--red: #f44336;--white: #fff;--black: #000}body{font-family:Open Sans,Helvetica Neue,sans-serif;margin:0;padding:0}main{position:absolute;text-align:center;margin:0;padding:0;height:100vh;width:100vw}.main-switch{position:relative;width:110px;height:35px;margin:20px 19px 0;overflow:hidden}.main-switch{border-radius:2px}.main-switch .knobs,.main-switch .layer{position:absolute;inset:0}.main-switch .checkbox{position:relative;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;z-index:3}.main-switch .knobs{z-index:2}.main-switch .layer{width:100%;background-color:var(--alternative-darker);transition:.3s ease all;z-index:1;border:2px solid var(--alternative)}.main-switch .knobs:before,.main-switch .knobs:after,.main-switch .knobs span{position:absolute;top:4px;width:40px;height:10px;font-size:10px;font-weight:700;text-align:center;line-height:1;padding:9px 4px;border-radius:2px;transition:.3s ease all}.main-switch .knobs:before{content:"";left:4px;background-color:var(--red)}.main-switch .knobs:after{content:"ON";right:4px;color:var(--black)}.main-switch .knobs span{display:inline-block;left:4px;color:var(--white);z-index:1}.main-switch .checkbox:checked+.knobs span{color:var(--dark)}.main-switch .checkbox:checked+.knobs:before{left:58px;background-color:var(--action)}.main-switch .checkbox:checked+.knobs:after{color:var(--white)}.main-switch .checkbox:checked~.layer{background-color:var(--alternative)}.popup#colorChangers{display:flex;flex-direction:column;width:50px;margin:10px 0 0 20px}.colorChangers{display:flex;flex-direction:column;padding-top:0;padding-left:10px;gap:.5em}.colorChangers button{border-radius:2px;border:2px solid var(--black);outline:none;width:40px;height:25px;cursor:pointer}.colorChangers button.selected{border:2px solid var(--action)}.colorChangers button.randomColor,.colorChangers span .colorPicker #label{border:2px solid var(--alternative);background-color:var(--black);color:var(--action)}.colorChangers button.randomColor span{margin-left:0;margin-top:2px}.colorChangers span .colorPicker #label svg{margin-top:3px}.popup{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup .popuptext{visibility:hidden;width:60px;background-color:var(--dark);color:var(--white);text-align:center;border-radius:2px;padding:8px 0;position:absolute;z-index:1;top:130%;left:50%;margin-left:0}.popup .popuptext:before{position:absolute;top:-5px;content:"";display:block;width:0;height:0;border-left:5px solid #0000;border-right:5px solid #0000;left:25px;border-bottom:5px solid var(--dark)}.popup .open{visibility:visible;-webkit-animation:fadeIn .5s;animation:fadeIn .5s}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.popup .popupOpener{background-color:var(--dark);color:var(--alternative);border:2px solid var(--alternative);border-radius:2px;outline:none;height:35px;width:110px;cursor:pointer;font-style:bold}.popup .popupOpener.initial{border:2px solid var(--alternative)}.popup .popupOpener.open{animation:borderIn .3s ease-in forwards}.popup .popupOpener.closed{animation:borderOut .3s ease-out forwards}@keyframes borderIn{0%{border-color:var(--alternative)}to{border-color:var(--action)}}@keyframes borderOut{to{border-color:var(--alternative)}0%{border-color:var(--action)}}.colorPicker{display:flex;flex-direction:column;padding-top:0;gap:.5em}#label{border-radius:2px;border:2px solid var(--white);outline:none;width:36px;height:22px;cursor:pointer}#inputColor{display:block;visibility:hidden;margin-top:-15}footer{position:absolute;bottom:20px;left:20px;background-color:var(--white);border-radius:2px;padding:5px 8px}footer span a{color:var(--dark);font-weight:300;text-decoration:none}footer span a:hover{color:var(--action)}