:root{--clr-primary-1:hsl(205,86%,17%);--clr-primary-2:hsl(205,77%,27%);--clr-primary-3:hsl(205,72%,37%);--clr-primary-4:hsl(205,63%,48%);--clr-primary-5:hsl(205,78%,60%);--clr-primary-6:hsl(205,89%,70%);--clr-primary-7:hsl(205,90%,77%);--clr-primary-8:hsl(205,86%,81%);--clr-primary-9:hsl(205,90%,88%);--clr-primary-10:hsl(205,100%,96%);--clr-grey-1:hsl(209,61%,16%);--clr-grey-2:hsl(211,39%,23%);--clr-grey-3:hsl(209,34%,30%);--clr-grey-4:hsl(209,28%,39%);--clr-grey-5:hsl(210,22%,49%);--clr-grey-6:hsl(209,23%,60%);--clr-grey-7:hsl(211,27%,70%);--clr-grey-8:hsl(210,31%,80%);--clr-grey-9:hsl(212,33%,89%);--clr-grey-10:hsl(210,36%,96%);--clr-white:#fff;--clr-red-dark:hsl(360,67%,44%);--clr-red-light:hsl(360,71%,66%);--clr-green-dark:hsl(125,67%,44%);--clr-green-light:hsl(125,71%,66%);--clr-blackt:#222;--transition:all .3s linear;--spacing:.1rem;--radius:.25rem;--light-shadow:0 5px 15px rgba(0,0,0,.1);--dark-shadow:0 5px 15px rgba(0,0,0,.2);--max-width:1170px;--fixed-width:620px}.container{text-align:center;display:flex;align-items:center;height:100px;padding-left:2rem}.container h3{margin-top:0;margin-right:2rem}input{border-color:transparent;padding:.5rem 1rem;font-size:1.2em;border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}.btn{background:var(--clr-primary-5);padding:.5rem 1rem;font-size:1.2em;border-color:transparent;border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);cursor:pointer;text-transform:capitalize;color:var(--clr-white)}input.error{border:2px solid var(--clr-red-dark)}.color{padding:1rem 2rem;cursor:pointer;font-size:1rem;text-transform:none}.percentage-value,.color-value{margin-bottom:0;color:var(--clr-grey-1)}.color-light .color-value,.color-light .percentage-value{color:var(--clr-white)}.alert{text-transform:uppercase;font-size:.85rem;margin-top:.5rem}.colors{min-height:calc(100vh - 100px);display:grid;grid-template-columns:repeat(auto-fit,minmax(222.33px,1fr));grid-template-rows:repeat(auto-fit,minmax(96px,1fr))}@media screen and (max-width:576px){.container h3{font-size:1rem}input,.btn{font-size:.85rem}}