body {
    font-family: 'Arial', sans-serif;
    background-color: #f5eaff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.menu-principal {
    background-color: #261d2f; /* Fundo do menu escuro */
    padding: 10px 0; /* Espaçamento interno superior e inferior */
    text-align: center;
}

.menu-principal ul {
    list-style: none; /* Remove os marcadores da lista */
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-evenly;
}

.menu-principal li {
    /* Exemplo de Box Model para espaçamento */
    margin: 0 15px; /* Margem horizontal entre os itens */
    /* padding já definido no <a>, mas poderia ser aqui para o item da lista */
}

.menu-principal a {
    color: #ffffff; /* Cor do texto do link */
    text-decoration: none; /* Remove o sublinhado do link */
    padding: 8px 15px; /* Preenchimento interno do link (área clicável) */
    display: block; /* Faz o padding funcionar em toda a área do link */
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Transição suave */
}

.menu-principal a:hover {
    background-color: #555; /* Fundo ao passar o mouse */
    color: #f0f0f0;
}