@import"https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap";.app{margin:0 .5rem;border:2px solid var(--black);width:1200px;max-width:1200px;height:calc(100% - 1rem);border-radius:4px;padding:1rem;display:flex;flex-direction:column;overflow:auto}.app form{display:flex;gap:.5rem;flex-direction:column}button{background-color:var(--black);color:var(--white);font-weight:700;width:328px;max-width:100%;margin:0 auto;height:3rem;cursor:pointer;border-radius:2px}button:disabled{cursor:not-allowed;background-color:var(--gray);border:1px solid var(--gray)}.divider{height:2px;width:1.5rem;background-color:var(--black);margin:2.5rem auto}.msg{display:flex;justify-content:center;align-items:center;height:100%}.error{margin-top:1rem;text-align:center;color:var(--red)}.card{padding:.5rem;border:1px solid var(--black);border-radius:2px;display:grid;gap:.5rem;grid-template:"colorA preview controllerA" 44px "colorB contrastRatio ." 44px/1fr 2fr .5fr;align-items:center}.card .colorA{grid-area:colorA}.card .colorB{grid-area:colorB}.card .colorA,.card .colorB{display:flex;align-items:center;justify-content:space-between}.card .colorA div,.card .colorB div{height:1.5rem;width:1.5rem;border:.5px solid var(--black);border-radius:2px}.card .colorA p,.card .colorB p{font-family:Roboto Mono;text-transform:uppercase}.card .preview{grid-area:preview;border:.5px solid var(--black);border-radius:2px;height:40px;-webkit-transition:.4s;transition:.4s}.card .preview p{text-align:center;font-size:1.125rem;line-height:39px;-webkit-transition:.4s;transition:.4s}.card .contrastRatio{grid-area:contrastRatio;text-align:center;align-items:center}.card .controllerA{grid-area:controllerA;background-color:var(--white);background-image:url(/refresh.svg);background-repeat:no-repeat;background-position:center;background-size:25px 25px;border:1px solid var(--black);border-radius:2px;cursor:pointer;height:40px;width:40px}.switchLabel{display:flex;align-items:center;gap:1rem}.switchLabel div{display:flex;align-items:center;gap:.25rem}.switch{position:relative;display:inline-block;width:3.5rem;height:30px}.switch input{opacity:0;width:0;height:0}.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--white);border:.5px solid var(--black);-webkit-transition:.4s;transition:.4s;border-radius:2px}.switch .slider:before{position:absolute;content:"";height:1.5rem;width:1.5rem;left:2px;top:2px;background-color:var(--black);border-radius:2px;-webkit-transition:.4s;transition:.4s}.switch input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.grid{max-width:1164px;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(328px,1fr));grid-gap:1rem}textarea{border:1px solid var(--black);border-radius:2px;width:100%;font-family:Roboto Mono;text-transform:uppercase;padding:.5rem;height:7.5rem;resize:none}textarea::placeholder{color:var(--gray)}textarea:focus{outline:none}html,body{height:100%}html #root,body #root{display:flex;justify-content:center;align-items:center;height:100%}:root{font-family:Roboto;--black: #000000;--darker-gray: #303030;--dark-gray: #5E5E5E;--gray: #919191;--light-gray: #C6C6C6;--white: #FFFFFF;--red: #FF0000}:root *{box-sizing:border-box}:root body,:root h1,:root h2,:root h3,:root h4,:root h5,:root h6,:root p,:root label,:root span,:root ul,:root li,:root a{margin:0;padding:0}:root h1{font-size:2rem;margin-bottom:1.5rem}:root h2{font-size:1.5rem}:root p,:root label{font-size:1rem}