/* Reset básico e fontes */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #121212;
    color: #f0f0f0;
    text-align: center;
    padding: 2rem;
}

header {
    margin-bottom: 2rem;
}

header h1 {
    margin-bottom: 0.5rem;
}

/* O container que segura as cores */
.palette-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Faz as caixas terem a mesma altura */
    min-height: 50vh; /* Altura mínima */
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden; /* Garante que os cantos arredondados sejam aplicados nas caixas internas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Cada caixa de cor individual */
.color-box {
    flex: 1; /* Faz com que todas as caixas ocupem o mesmo espaço */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinha o texto na parte de baixo */
    padding: 1rem;
    transition: background-color 0.3s ease; /* Animação suave na troca de cor */
}

/* O texto com o código da cor */
.hex-code {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 0.5rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.hex-code:hover {
    transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
}

/* O botão principal */
.generate-btn {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.generate-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px); /* Efeito de "levantar" */
}


/* Ajuste na caixa de cor para posicionar o ícone dentro dela */
.color-box {
    position: relative; /* Essencial para o posicionamento absoluto do filho */
}

/* Estilo para o botão do cadeado */
.lock-btn {
    position: absolute; /* Posicionamento em relação ao .color-box */
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%; /* Deixa o fundo redondo */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lock-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* Estilo para o ícone SVG dentro do botão */
.lock-btn svg {
    width: 20px;
    height: 20px;
    fill: #ffffff; /* Cor do ícone */
}