/* Estilos base para o menu de navegação */
#nav {
    flex: 1 0 100%;  /* Ocupa 100% da largura da linha */
    display: flex; /* Mantém o layout do menu como horizontal */
    align-items: center; /* Centraliza os links verticalmente */
    background-color: #2C3E50; /* Cor de fundo mais escura */
    padding: 10px 20px; /* Padding vertical e horizontal */
    margin: 0; /* Remove as margens padrão */
}

/* Estilo dos links no menu de navegação */
#nav a {
    font-family: 'Arial', sans-serif; /* Fonte dos links */
    color: #ECF0F1; /* Cor de texto clara para contraste */
    padding: 10px 15px; /* Espaçamento ao redor dos links */
    text-decoration: none; /* Remove o sublinhado dos links */
}

/* Efeito de hover para os links */
#nav a:hover {
    background-color: #546E7A; /* Cor de fundo mais clara e notável ao passar o mouse */
    color: #FFFFFF; /* Cor do texto ao passar o mouse */
    border-radius: 5px; /* Borda arredondada ao passar o mouse */
}

/* Estilo para o link ativo (página atual) */
#nav a.active {
    background-color: #6789ab; /* Cor de fundo mais suave para o link ativo */
    color: white; /* Cor do texto para o link ativo */
    border-radius: 5px; /* Borda arredondada para o link ativo */
}