:root{--foregroundColor: #FFFFFF;--backgroundColor: #000000}html{font-size:10px;font-family:sans-serif;line-height:1.5;margin:0;padding:0;color:#ddf}header{background-color:#111;margin:0;padding:0}h1{font-size:2.6rem;color:#ddf;margin:0;padding:2rem;text-align:center}body{background-color:#222;margin:0}.tab-list{margin:1rem;text-align:center}button[role=tab]{width:20rem;height:3.5em;margin:.2rem;line-height:2;border:.1rem solid #111;color:#ddf;background-color:#333;text-align:center}button.active{background-color:#555;border:.1rem solid #111}button:focus{border:#DDDDFF solid 1px}.random-color{padding:3rem;text-align:center}.color-container{width:100%;max-width:100rem;justify-self:center}.color-display{width:100%;margin-bottom:1rem}.color-code{padding:2rem;margin:1rem auto 0;line-height:4;font-size:3rem;color:#fff}.button-container{display:flex;justify-content:space-between}.new-color,.save-color{margin:0;width:48%;height:4rem;outline:none;border:.1rem solid #111;color:#ddf;background-color:#333}.new-color:hover,.save-color:hover{background-color:#555}h2{color:#ddf;font-size:2rem}.saved-colors{display:flex;flex-wrap:wrap;justify-content:center}.saved-code{color:#ddf;font-size:1.6rem;margin-bottom:0}.delete{width:100px;outline:none;border:.1rem solid #111;color:#ddf;background-color:#333;margin-bottom:1rem;margin-top:0}.color-wheel-container{padding:0;justify-items:center;text-align:center}.color-wheel-selected{margin:2rem auto .1rem;font-size:2.5rem;color:#ddf;text-shadow:2px 2px 1px rgba(0,0,0,.5)}.color-wheel-color{margin:auto;height:8rem;width:29rem}h2{color:#ddf;font-size:2rem;text-align:center}.color-palette-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));justify-items:center}.harmony-container{width:100%;justify-items:center}.save-palette{margin:3rem auto 0;width:25rem;line-height:3;outline:none;border:.1rem solid #111;color:#ddf;background-color:#333;display:block}.save-palette:hover{background-color:#555}.saved{display:flex;flex-direction:column;align-items:center;border:.1rem solid #DDDDFF44;border-radius:.5rem;padding:.5rem;margin:0 1rem 2rem;max-width:100%}.palette-title{font-size:1.5rem;margin:.5rem .5rem 0}.colors-mapping{display:flex;flex-flow:wrap;justify-content:center}.saved-display{align-items:center;text-align:center;padding:1rem}.saved-code{color:#ddf;font-size:1.6rem;margin:0}.saved-color{margin:.1rem auto}.delete{width:50%;outline:none;border:.1rem solid #111;color:#ddf;background-color:#333;margin-bottom:1rem;margin-top:0;line-height:2}.colors-complementary{display:flex;justify-content:center;flex-wrap:wrap}.colors-palette-color{margin:.5rem}h3{justify-self:center}.design-tips{color:#ddf;font-size:1.4rem;justify-self:center;margin-top:2rem;line-height:1.6}.colors-complementary p{font-size:1.6rem;text-align:center;margin-bottom:0}.access-contrast-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));justify-items:center;align-items:start}.contrast-container{display:flex;justify-content:center;flex-wrap:wrap;width:100%}h3{margin:0;font-size:1.8rem}.access-contrast{width:100%}.contrast-container>*{margin:1rem;display:flex;flex-direction:column}.lightness{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.lightness::-webkit-slider-runnable-track{background:linear-gradient(90deg,#000,#fff);border-radius:1rem}.lightness::-moz-range-track{background:linear-gradient(90deg,#000,#fff);border-radius:1rem}.lightness::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#ddf;height:2rem;width:1rem;border-radius:1rem;margin:-.25rem 0}.lightness::-moz-range-thumb{background:#ddf;width:1rem;border-radius:1rem;border:none}.lightness-btns{display:flex;flex-direction:row;gap:.5rem;margin-bottom:1rem}.lightness-btns>button{width:100%;height:100%;border:.1rem solid #111;color:#ddf;background-color:#555;font-size:2rem}.lightness-btns>button.active{background-color:#333;border:.1rem solid #111}.lightness-btns>button:focus{border:#DDDDFF solid 1px}.contrast-foreground,.contrast-background{background-color:#111;box-sizing:border-box;text-align:center;padding:2rem 4rem}.contrast-container label{margin:.5rem 0 0;font-size:1.5rem}.contrast-container input:not([type=range]){margin:0 auto;font-size:1.5rem;text-align:center;width:80%;background-color:#ddf;border:none;border-radius:.2rem}.wcag-container{display:grid;grid-gap:1rem;grid-template-columns:1fr 1fr 1fr;text-align:center;justify-self:center;margin:1rem;background:#111;padding:1rem;align-items:center}.wcag-item{display:flex;flex-direction:column;margin:auto}.wcag-item label{font-size:1.5rem}.contrast-ratio{line-height:0;text-align:center;justify-self:center;box-sizing:border-box;width:28rem;padding:1rem;background-color:#111;align-content:center}.contrast-ratio h3{line-height:2rem;margin-top:1rem}.contrast-ratio-num{font-size:4rem}.contrast-ratio-feedback{display:flex;align-items:center;justify-content:center}[class*=check-]{font-size:3rem;background:#0a0;padding:.5rem;border-radius:1rem;margin:1rem;color:#111;font-weight:400;line-height:1}.previews-container h3{display:flex;align-items:center}.previews-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));justify-items:center;border:2px solid #111111;margin:2rem;padding:1rem}.preview{margin:.5rem;line-height:1.8;padding:.2rem}.preview p{margin:0}.standard-text{font-size:1.8rem;width:100%}.large-text{font-size:2.6rem;width:100%}.graphical{width:100%}.back-color{margin:1rem;padding:1rem;justify-self:center}.graphic-display{display:flex;margin-bottom:3rem}.input-slider{text-align:center}.slider{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%}.slider::-webkit-slider-runnable-track{background:linear-gradient(90deg,#000,#fff);border-radius:1rem}.slider::-moz-range-track{background:linear-gradient(90deg,#000,#fff);border-radius:1rem}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#ddf;height:2rem;width:1rem;border-radius:1rem;margin:-.25rem 0}.slider::-moz-range-thumb{background:#ddf;width:1rem;border-radius:1rem;border:none}.slider-btns{display:flex;flex-direction:row;gap:.5rem;margin-bottom:1rem}.slider-btns>button{width:100%;height:100%;border:.1rem solid #111;color:#ddf;background-color:#555;font-size:2rem}.slider-btns>button.active{background-color:#333;border:.1rem solid #111}.slider-btns>button:focus{border:#DDDDFF solid 1px}.gradient-container{display:flex;flex-direction:column;margin:auto;align-items:center;font-size:2rem}.gradient-container h3{font-size:2rem;text-transform:uppercase;margin:0}.gradient-preview{width:100rem;max-width:90%;height:15rem;margin:1rem}.gradient-colors-container{display:flex;flex-wrap:wrap;justify-content:center}.gradient-color,.angle-container,.css-code-container{background-color:#111;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;text-align:center;padding:2rem 4rem;margin:1rem}.gradient-color>*,.angle-container>*{margin-top:2rem;display:flex;flex-direction:column;place-items:center}.gradient-color-input{width:10rem;height:5rem;background:none;padding:0;border:none;border-bottom:.4rem solid #555555}.gradient-color-input:focus{border:none}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=number]{background:none;border:none;border-bottom:.4rem solid #555555;outline:none;color:#ddf;font-size:3rem;text-align:center;width:10rem}.angle-container{display:flex;flex-direction:column;align-items:center}.written-code{font-family:monospace}