.color-card{min-height:300px;position:relative}@media (max-width: 499.98px){.color{min-height:200px}}.color:active{pointer-events:none}.del-btn{color:#b7b4ad}@media (min-width: 1200px){.del-btn{display:none}.color-card:hover>.del-btn{display:block;font-size:20pt;position:absolute;top:0;right:10px;cursor:pointer;pointer-events:auto;text-shadow:1px 1px 2px rgba(255,255,255,.8)}}@media (max-width: 1200px){.color-card>.del-btn{font-size:20pt;position:absolute;top:0;right:10px;cursor:pointer;pointer-events:auto;text-shadow:1px 1px 2px rgba(255,255,255,.8)}}*{box-sizing:border-box}body{font-family:Roboto,sans-serif;font-weight:400;background-color:#f5f4f2}ul{padding:50px 0;margin:0}li{padding:0;list-style:none;box-shadow:2px 2px 4px 2px #ccc}hr{color:#d9d8d4}button{border-radius:5px;height:26px;border:1px solid #ccc;cursor:pointer}.container{max-width:960px;margin:0 auto;padding:0 15px}.title{margin-top:60px}.sub-title{padding:20px 0}.wrapper{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;align-items:center;padding:10px 0}.row-cols-3{display:grid;grid-template-columns:repeat(3,1fr);align-content:space-around;column-gap:50px;row-gap:50px}@media (max-width: 767.98px){.row-cols-3{grid-template-columns:repeat(2,auto)}}.row{padding:0;margin:50px 0}.colorHex{background-color:#fff;width:100%;padding:20px 0;font-size:12pt;text-align:center;color:#36352f;outline-style:none;border:0px}#color-hex-input{border-radius:5px;height:24px;outline-style:none;border:0px;border:1px solid #ccc;width:100px;font-size:14pt;margin:0 10px}.footer-title{margin:100px 0 80px;text-align:center}