* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     background: #121212;
 }
 
 .container {
     margin: 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }
 
 .container .color {
     list-style: none;
     margin: 13px;
     padding: 7px;
     cursor: pointer;
     text-align: center;
     border-radius: 6px;
     background: #1e1e1e;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
     transition: transform 0.3s ease;
 }
 
 .container .color:active {
     transform: scale(0.95);
 }
 
 .color .rect-box {
     width: 185px;
     height: 188px;
     border-radius: 5px;
     background: #bb86fc;
 }
 
 .color:hover .rect-box {
     filter: brightness(110%);
 }
 
 .color .hex-value {
     display: block;
     color: #e0e0e0;
     margin: 12px 0 8px;
     font-size: 1.15rem;
     font-weight: 500;
     text-transform: uppercase;
 }
 
 .refresh-Btn {
     position: absolute;
     left: 50%;
     bottom: 20px;
     outline: none;
     font-size: 1.1rem;
     font-weight: 500;
     color: #121212;
     padding: 12px 20px;
     cursor: pointer;
     border-radius: 5px;
     background: #bb86fc;
     border: 2px solid #1e1e1e;
     box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
     transform: translateX(-50%);
 }

 marquee{
    color: aliceblue;
    margin: 12px;
 }
 .source{
    color: #bb86fc;
    text-decoration: none;
}
 
 @media screen and (max-width: 510px) {
     .container {
         margin: 10px;
     }
     .container .color {
         margin: 8px;
         padding: 5px;
     }
     .color .rect-box {
         width: 145px;
         height: 148px;
     }
     .color .hex-value {
         font-size: 1.05rem;
     }
 }