body{margin:0;font-family:Roboto,sans-serif;background-color:#f7eded;color:#000;min-width:768px}*{box-sizing:border-box}h1,p{margin:0}header,footer{border-bottom:1px solid black;background:radial-gradient(circle,#3f5efb,#fc466b);color:#000}.container{padding-left:1em;padding-right:1em;width:100%;max-width:450px;margin-left:auto;margin-right:auto}.header-container{text-align:center;padding-top:1em;padding-bottom:1em;text-shadow:0 1px 1px white}.status-container{text-align:center;grid-area:stat}.color-form{display:grid;padding-top:.4em;padding-bottom:1em;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,1fr);gap:.2em;align-items:center;grid-template-areas:"stat stat stat stat stat stat stat stat stat stat stat stat" "swig swig swig iclr iclr iclr iclr radi radi radi radi radi" "hexi hexi hexi hexi hexi hexi hexi hexi hexi hexi hexi hexi" "rgbi rgbi rgbi rgbi rgbi rgbi rgbi rgbi rgbi rgbi rgbi rgbi" "hsli hsli hsli hsli hsli hsli hsli hsli hsli hsli hsli hsli" "drop drop drop drop drop drop drop drop drop drop drop drop" "clrb clrb clrb clrb clrb clrb savb savb savb savb savb savb"}.input-color{border-radius:5px;width:100%;grid-area:iclr}.radio-container{grid-area:radi;display:grid;grid-template-columns:1fr 3fr 1fr 3fr 1fr 3fr;justify-content:center;text-align:left;font-size:.75rem}.radio-option{margin:0}.save-btn{grid-area:savb}.color-value-input{text-align:center}.rgb-input{grid-area:rgbi}.hsl-input{grid-area:hsli}.hex-input{grid-area:hexi}.drop-down{border:0;grid-area:drop;text-align:center}.btn{background-color:#fff;text-align:center}.color-btn{grid-area:clrb}.drop-down,.btn{background-color:#d1e6e6}.drop-down,.btn,.color-value-input{border-radius:5px;border:1px solid gray}.drop-down,.drop-down-option{text-transform:capitalize}.switch-grid{grid-area:swig;display:flex;width:100%;align-items:center;justify-content:center}.switch{position:relative;display:inline-block;width:100%;max-width:39.6px;height:100%}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:100%;width:50%;left:0;bottom:0;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{transform:translate(100%)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.drop-down,.input-color,.btn,.slider{cursor:pointer}.color-container{display:grid;grid-template-columns:1fr 2rem;grid-template-rows:repeat(5,1fr);height:85vh;width:95%;padding-left:0;padding-right:0;margin-bottom:1em;border:2px solid gray}.color-img-container{width:100%}.color-label-container{display:flex;justify-content:center;align-items:center;border:1px solid black}.color-label{writing-mode:vertical-lr;text-orientation:sideways;text-align:center}.save-title-container{text-align:center;font-size:1.5rem;margin-bottom:.05em}.save-status-message{text-align:center;margin-bottom:.5em}.save-radio-container{display:flex;justify-content:center;gap:.5em;margin-bottom:.5em}.save-color-container{display:grid;grid-template-columns:repeat(5,1fr);width:95%;padding-left:0;padding-right:0;border:1px solid gray;margin-bottom:1em}.save-color-mode{position:relative;grid-column:span 3;display:flex;justify-content:center;align-items:center;font-size:.8rem}.base-save-color{grid-column:span 2;text-align:center}.del-save-btn{position:absolute;top:0;right:0;width:10%;height:100%;margin-left:auto;border:none;background-color:#dc143c;color:#fff;cursor:pointer;text-align:center;padding:0}.color-palette{height:150px;writing-mode:vertical-lr;text-orientation:sideways}.base-save-color,.color-palette{display:flex;align-items:center;justify-content:center}.reference-container{text-align:center;margin-bottom:1em;display:flex;flex-direction:column;justify-content:center;gap:.5em}.reference-link{color:#000}.footer-container{text-align:center;padding-top:1em;padding-bottom:1em}@media(min-width:480px){.radio-container{font-size:1rem}}@media(min-width:768px){.color-form{grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(5,1fr);gap:.4em;grid-template-areas:"stat stat stat stat stat stat stat stat stat stat stat stat" "swig swig swig iclr iclr iclr iclr iclr radi radi radi radi" "hexi hexi hexi hexi rgbi rgbi rgbi rgbi hsli hsli hsli hsli" "drop drop drop drop drop drop drop drop drop drop drop drop" "clrb clrb clrb clrb clrb clrb savb savb savb savb savb savb"}.color-container,.save-color-container{max-width:800px}.color-container{grid-template-rows:1fr 2rem;grid-template-columns:repeat(5,1fr);grid-auto-flow:column;height:55vh}.color-img-container{width:auto;height:100%}.color-label{writing-mode:horizontal-tb;text-orientation:upright}.save-color-mode{font-size:1rem}.color-palette{height:50px;writing-mode:horizontal-tb;text-orientation:upright}.reference-container{flex-direction:row;gap:2em}}.dark-body{color:#fff;background-color:#282828}.dark-form{color:#fff;background-color:#666}.dark-selectable{color:#fff;background-color:#3d3232}.dark-color-container{background-color:#232525}.dark-color-label-container{border:1px solid whitesmoke}.dark-text{color:#fff}