*{margin:0;padding:0;box-sizing:border-box}body{font-size:62.5%;font-family:sans-serif;background-color:#f8fafc}h1{color:#333;font-size:1.6rem}header{display:flex;align-items:center;gap:1.2rem;max-width:60%;margin:3.2rem auto}header input{border:none;outline:none;font-size:1.2rem;padding:.6rem}header input::placeholder{color:#aaa}main{width:100%;display:grid;grid-template-columns:repeat(6,1fr);font-size:1.6rem;font-weight:500}.color-box{padding:1.2rem 2.4rem;height:10rem;cursor:pointer;position:relative;font-size:1.2rem}button{border:none;background-color:#a855f7;color:#fff;padding:.8rem;font-size:1.2rem;cursor:pointer;transition:all .3s}button:hover{background-color:#7e22ce}.typed-color-show{width:4.8rem;height:2.4rem;box-shadow:0 1px 8px 8px #ddd}.copied{position:absolute;top:10%;left:50%;transform:translate(-50%);padding:.4rem .8rem;color:#fff;background-color:#60a5fa;font-size:.8rem;border-radius:9px;font-weight:700}.message{position:absolute;font-size:1rem;font-weight:700;top:5%;left:50%;transform:translate(-50%,-50%);padding:.6rem 1.2rem;color:#fb7185;background-color:#fecdd3;border-radius:9px}