:root{--spacing:2rem;--max-checkmark-circle-size:40px;--min-checkmark-circle-size:8px}body{height:100vh;margin:0;font-family:Roboto,sans-serif;font-weight:300}main{flex-direction:column;justify-content:center;display:flex}.cmp-button{color:inherit;background:0 0;border:1px solid gray;border-radius:3px;margin:1rem;padding:.25rem .375rem;font-family:inherit;display:inline-block;&:disabled{color:gray}}.cmp-color-form{min-width:95vw;margin:var(--spacing)auto;text-align:center;& .cmp-color-form__row{font-size:0}& .cmp-color-form__color-input{--color-input-width:3rem;width:var(--color-input-width);height:var(--color-input-width);cursor:pointer;border-radius:initial;margin:.25rem;padding:0;transition:opacity .3s;position:relative;box-shadow:0 8px 15px #dcdcdc;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:1px solid gray}&:hover{opacity:.8}}& .cmp-color-form__difficulty-label{width:100%}& .cmp-color-form__difficulty{margin-top:2.5rem}& fieldset{border:none}}.cmp-color-grid{--width:95vw;--grid:calc(var(--width)/var(--size));--checkmark-circle-size:calc(var(--grid)/5);--checkmark-size:calc(var(--checkmark-circle-size)/1.25);--checkmark-margin:calc(var(--checkmark-circle-size)/5);text-align:center;margin-bottom:var(--spacing)}@media (width>=50rem){.cmp-color-grid{--width:80vw}}@media (width>=100rem){.cmp-color-grid{--width:40vw}}@media (orientation:landscape){.cmp-color-grid{--width:75vh}}.cmp-color-grid__row{width:100vw;height:var(--grid)}.cmp-color-grid__tile{height:var(--grid);width:var(--grid);text-align:left;display:inline-block}.cmp-color-grid__tile--first-click{box-shadow:inset 0 0 0 2px #fff}.cmp-color-grid__tile--correct{position:relative;&:after{content:"✓";line-height:calc(var(--checkmark-circle-size) + .5);margin:var(--checkmark-margin);font-size:var(--checkmark-size);width:var(--checkmark-circle-size);height:var(--checkmark-circle-size);min-width:var(--min-checkmark-circle-size);min-height:var(--min-checkmark-circle-size);max-width:var(--max-checkmark-circle-size);max-height:var(--max-checkmark-circle-size);text-align:center;color:#000;background:#fff;border-radius:50%;position:absolute}}.cmp-header{text-align:center}.cmp-header__heading{padding:4rem 0 1rem}.cmp-navigation{align-items:center;margin:0 auto;display:flex}.util-hidden{display:none}
/*# sourceMappingURL=repo.8b8e1397.css.map */