/* ==============================
   ESTILO BASE DA PÁGINA
   ============================== */
body {
    font-family: "Poppins", sans-serif; /* Fonte principal */
    margin: 0; /* Remove margem padrão do browser */
    padding: 0; /* Remove padding padrão */
    background-color: #ffffffff; /* Cor de fundo da página */
}

/* ==============================
   CABEÇALHO
   ============================== */
.container {
    background-color: #000000; /* Fundo azul escuro do cabeçalho */
    padding: 30px; /* Espaço interno */
    text-align: center; /* Centraliza conteúdo dentro do container */
}

.container h1 {
    color: #f4f4f4; /* Cor do título */
    font-weight: 400; /* Negrito */
    margin: 0; /* Remove margem extra do h1 */
}

/* ==============================
   SUBTÍTULO
   ============================== */
h3 {
    text-align: center; /* Centraliza o texto */
    padding: 0 20px; /* Espaçamento horizontal */
    color: #000000; /* Cor do subtítulo */
    font-weight: 400; /* Peso médio */
    margin-top: 50px; /* Espaço acima do subtítulo */
    font-size: 18px;
}


/* ==============================
   CAMPOS DE INPUT E BOTÃO
   ============================== */
input {
    width: 300px; /* Largura responsiva considerando margens */
    display: block; /* Ocupa linha inteira */
    margin: 20px auto; /* Centraliza horizontalmente e adiciona espaço vertical */
    padding: 10px; /* Espaço interno para digitar */
    border-radius: 15px; /* Bordas arredondadas */
    border: 1px solid #ccc; /* Borda leve para destaque */
    font-size: 16px; /* Tamanho da fonte */
}

button {
    background-color: #000000; /* Fundo preto */
    color: #f4f4f4; /* Texto branco */
    border-radius: 20px; /* Bordas arredondadas */
    padding: 10px 20px; /* Espaçamento interno */
    font-size: 15px; /* Tamanho da fonte */
    border: none; /* Remove borda padrão */
    display: block; /* Para centralizar */
    margin: 0 auto; /* Centraliza horizontalmente */
    font-weight: 600; /* Negrito */
    cursor: pointer; /* Mostra que é clicável */
    transition: background-color 0.3s ease; /* Animação suave ao passar o mouse */
}

button:hover {
    background-color: #2e2e2e; /* Cor de hover */
}

/* ==============================
   PARÁGRAFOS
   ============================== */
p {
    text-align: center; /* Centraliza texto */
    font-size: 18px; /* Tamanho confortável para leitura */
    font-weight: 400; /* Peso médio */
    margin: 20px auto; /* Espaçamento vertical */
    margin-top: 30px;
}

/* ==============================
   IMAGENS
   ============================== */
img {
    display: block;
    margin: 0px auto;
    max-width: 300px; /* Define largura máxima */
    height: auto; /* Mantém proporção */
}

/* ==============================
   BLOCO DE STATUS VERDE
   ============================== */
.green-block {
    background-color: rgba(78, 165, 78, 0.72); /* Verde translúcido */
    padding: 10px 20px; /* Espaço interno */
    border-radius: 30px; /* Bordas arredondadas */
    margin: 15px auto 0 auto; /* Espaço acima e centraliza horizontalmente */
    text-align: center; /* Centraliza texto dentro do bloco */
    max-width: 300px; /* Largura máxima do bloco */
}

/* ==============================
   RESPONSIVIDADE
   ============================== */
@media (max-width: 480px) {
    input, button {
        width: calc(100% - 20px); /* Ajusta largura para telas menores */
    }

    .green-block {
        max-width: 90%; /* Ajusta largura do bloco verde em telas pequenas */
    }
}