@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";:root{box-sizing:border-box;font-family:Roboto,sans-serif}*,*:before,*:after{box-sizing:inherit}body{background-color:#f2f2f2}button{padding:.5rem 1rem;background-color:#2196f3;color:#fff;border-radius:4px;border:none;cursor:pointer;font-size:1.2rem}.output{display:flex}.color-tone{padding:1rem}.card{background-color:#fff;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;border-radius:4px;padding:1rem;display:flex;flex-direction:column;gap:1rem;max-width:80vw;margin:auto;margin-top:2rem}#output-color,#output-palette{margin-top:1rem;font-size:1.2rem;font-weight:500;padding:1rem;border-radius:4px}#output-color{max-width:50%}#output-palette{display:flex;justify-content:space-around;width:100%}#input-color{padding:.5rem;border-radius:4px;border:1px solid #ccc;font-size:1.2rem}.card>div{margin-bottom:1rem}.card #input-color,.card #increase,.card #output-color{display:block;width:100%}@media (max-width: 760px){.card{max-width:95vw;margin:auto}.output{flex-direction:column}.output :nth-child(1){order:1}.output :nth-child(2){order:0}#output-color{max-width:100%}}