*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bground-color: #f8fafc;--purple-bground-color: #645cff;--text-color: #0f172a;--light-text-color: #94a3b8;--white: #ffffff}body{background-color:var(--bground-color);font-family:Roboto,sans-serif;color:var(--text-color);letter-spacing:.05rem}.text-dark{color:var(--text-color)}.text-light{color:var(--white)}.header{padding:1.7rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}@media screen and (min-width: 600px){.header{padding:4rem;gap:3rem}}.color-form{display:flex}.color-form-color-input,.color-form-txt-input,.color-form-btn{border:none}.color-form-color-input:focus,.color-form-txt-input:focus,.color-form-btn:focus{outline:2px solid #bbb}.color-form-color-input{width:50px;height:45px;background:none;cursor:pointer}.color-form-txt-input{padding-inline:1em;color:var(--light-text-color);font-size:1.1rem;letter-spacing:.05rem}@media screen and (max-width: 600px){.color-form-txt-input{width:50%}}.color-form-btn{padding-inline:1rem;letter-spacing:.05rem;cursor:pointer;border-top-right-radius:5px;border-bottom-right-radius:5px}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:130px}@media screen and (min-width: 650px){.color-grid{grid-auto-rows:300px}}.color-grid-color{padding:2rem}.color-grid-color p{margin-bottom:.7rem}