body{
    background-color: #1B3C53;
    color: #234C6A;
}

header, #container{
    text-align: center;
    font-size: 30px;
    color: #d2c1b6;
    background-color: #234C6A;
    padding: 10px;
    border: #456882 solid 10px;
    margin: 10px;
}

#container{
    margin-top: 10px;

    button{
        color: #d2c1b6;
        background-color: #1B3C53;
        border-radius: 25px;
        padding: 10px 20px;
        font-size: 20px;
        border: #d2c1b6 solid 2px;
        cursor: pointer;
        margin-bottom: 20px;
        box-shadow: 0 6px 10px rgba(102, 126, 234,0.3);
    }

    button:hover{
        background-color: #d2c1b6;
        color: #1B3C53;
    }
}

footer{
    text-align: center;
    font-size: 20px;
    color: #d2c1b6;
    a{
        color: #d2c1b6;
    }
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
    font-family: 'Times New Roman', Times, serif;
}

.palette{
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 150px;
    margin: 0 auto 20px auto;
}

.color{
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 10px rgba(102, 126, 234,0.3);
    transition: transform 0.2s;
    height:120px;
    cursor: pointer;
    &:hover{
        transform: scale(1.05) ;
    }
}

.colorid{
    background-color: #456882;
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    border-radius: 0 0 10px 10px;
}

.hex-value{
    font-weight: 500;
    letter-spacing: 0.5px;
}

#boxes{
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

#boxes5{
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.copy-btn{
    cursor: pointer;

    &:hover{
        color: #1B3C53;
    }
}

.boxes{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}


@media(max-width: 768px){
    .boxes{
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

h2{
    margin-bottom: 10px;
}
/*color Palette: 
#1B3C53 
#234C6A  
#456882 
#D2C1B6 
*/