/*
  RESET BÁSICO E CONFIGURAÇÕES DE FONTES
*/
body {
    margin: 0; /* Remove a margem padrão do body */
    padding: 0;
    font-family: Arial, sans-serif; /* Fonte base */
    min-height: 100vh; /* Garante que o body ocupe toda a altura da tela */
    display: flex; /* Habilita Flexbox no body */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    text-align: center; /* Centraliza o texto (útil para o h1) */
    background-color: #f4f4f4; /* Cor de fundo suave (opcional) */
}

/*
  ESTILIZAÇÃO DO CONTÊINER DE CONTEÚDO
*/
.content-container {
    /* Não é estritamente necessário para centralização, mas útil para agrupar */
    display: flex;
    flex-direction: column; /* Coloca os itens (logo e título) em coluna */
    align-items: center; /* Centraliza os itens (logo e título) dentro do contêiner */
    padding: 20px; /* Preenchimento para telas muito pequenas */
    max-width: 90%; /* Garante que não ultrapasse a largura da tela */
}

/*
  ESTILIZAÇÃO DO LOGOTIPO
*/
.logo {
    /* A chave da responsividade: define uma largura máxima */
    max-width: 250px; /* Largura máxima em telas grandes (ajuste conforme necessário) */
    width: 100%; /* Garante que ocupe a largura total do contêiner, até o max-width */
    height: auto; /* Mantém a proporção da imagem */
    margin-bottom: 20px; /* Espaço entre o logo e o título */
}

/*
  ESTILIZAÇÃO DO TÍTULO
*/
h1 {
    font-size: 2em; /* Tamanho base do título */
    color: #333;
    margin: 0; /* Remove margem padrão do h1 para melhor controle de espaçamento */
}

/*
  MEDIA QUERY PARA AJUSTES EM TELAS MUITO PEQUENAS (smartphones)
*/
@media (max-width: 600px) {
    .logo {
        max-width: 150px; /* Logotipo menor em celulares */
        margin-bottom: 15px;
    }
    h1 {
        font-size: 1.5em; /* Título menor em celulares */
    }
}