body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Fonte moderna e legível para toda a página */

    background-color: #f4f7fa;
    /* Fundo claro suave */

    margin: 0;
    padding: 0;
    /* Remove margens e espaçamentos padrão */
}

h1 {
    text-align: center;
    /* Centraliza o título */

    color: #2c3e50;
    /* Cor escura para o texto */

    margin-top: 30px;
    /* Espaçamento acima do título */
}

form, .comentario {
    background-color: #ffffff;
    /* Fundo branco para formulários e blocos de comentário */

    max-width: 600px;
    /* Largura máxima para boa leitura */

    margin: 20px auto;
    /* Centraliza horizontalmente e adiciona margem vertical */

    padding: 25px;
    /* Espaçamento interno confortável */

    border-radius: 8px;
    /* Bordas arredondadas */

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* Sombra suave para destaque */
}

input[type="text"], textarea {
    width: 100%;
    /* Campos ocupam toda largura disponível */

    padding: 10px;
    /* Espaçamento interno para conforto na digitação */

    margin-top: 6px;
    margin-bottom: 20px;
    /* Espaçamento vertical entre os campos */

    border: 1px solid #ccc;
    /* Borda cinza clara */

    border-radius: 6px;
    /* Bordas arredondadas para suavidade */

    font-size: 1em;
    /* Fonte legível */
}

button {
    background-color: #2ecc71;
    /* Cor verde para o botão */

    color: white;
    /* Texto branco */

    padding: 10px 18px;
    /* Espaçamento interno */

    border: none;
    /* Sem borda padrão */

    border-radius: 6px;
    /* Bordas arredondadas */

    cursor: pointer;
    /* Cursor muda para indicar que é clicável */

    font-size: 1em;
    /* Fonte adequada */
}

button:hover {
    background-color: #27ae60;
    /* Verde mais escuro ao passar o mouse */
}

a {
    color: #2980b9;
    /* Azul para links */

    text-decoration: none;
    /* Remove sublinhado */

    margin-right: 10px;
    /* Espaço à direita para separar links */
}

a:hover {
    text-decoration: underline;
    /* Sublinhado no hover para indicar clique */
}

small {
    color: #7f8c8d;
    /* Cinza claro para textos menores ou auxiliares */
}

hr {
    border: none;
    /* Remove bordas padrão */

    border-top: 1px solid #ddd;
    /* Linha superior fina para separação */

    margin: 30px auto;
    /* Espaçamento vertical e centralização */

    width: 80%;
    /* Linha com 80% da largura da área */
}


/* 
Resumo:
O arquivo estilo.css define a estilização visual do sistema de comentários,
utilizando uma paleta de cores suaves (azul, verde e cinza),
fontes modernas e layouts centrados. 
Ele melhora a legibilidade, usabilidade e estética da aplicação.

Os estilos incluem:

Layout limpo e centralizado para formulários e comentários.

Campos de entrada e botões amigáveis, com aparência moderna e arredondada.

Interatividade com efeitos hover em botões e links.

Separadores (<hr>) discretos e bem espaçados para melhorar a organização visual. 
*/