html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:system-ui;padding:6rem 1rem 1rem;margin:0;box-sizing:border-box}@media (min-width: 40em){body{padding:12rem 4rem 4rem}}a{text-decoration:none;transition:color .3s;color:#666}a:hover{color:#000}.footer{padding:1rem}li{display:grid;align-items:center;color:#fff;padding-top:5rem;box-shadow:#00000014 0 4px 8px;border-radius:4px;transition:all 1s;transition:transform .5s ease-in-out 0s,box-shadow .5s ease,background-color .5s ease}li:hover{box-shadow:0 14px 25px -2px #00000024;transform:translateY(-1.5%)}.color-name{display:block;background-color:#fff;color:#666;padding:1.5rem 2rem;outline:none;border:none;cursor:pointer}.copied{outline:1px solid rgb(8,219,145)}@media (min-width: 40em){.color-name{align-items:center;padding:1rem 2rem;font-size:1.15rem}}ul{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;align-items:center;margin:0;padding:0;list-style:none}@media (min-width: 40em){ul{grid-template-columns:1fr 1fr 1fr 1fr}}.header{background-color:#fff;border-bottom:1px solid #fafafa;margin-bottom:2rem;position:fixed;top:0;left:0;width:100%;padding:2rem;z-index:100;box-shadow:0 4px 20px -2px #f2f2f2}@media (min-width: 40em){.header{padding:4rem}}.slider{-webkit-appearance:none;width:100%;height:8px;border-radius:5px;background:#d3d3d3;outline:none;opacity:.7;transition:all .2s}.slider:active::-webkit-slider-thumb{background-color:#000}.slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 3px #ccc,0 0 0 6px #333}.slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #ccc,0 0 0 6px #333}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#000;cursor:pointer;transition:box-shadow .1s ease-in-out}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#000;cursor:pointer}.icon{display:inline-flex;margin-left:2rem;vertical-align:middle}