/* Define estilos base para o documento */
body {
    font-family: 'Arial', sans-serif; /* Define a fonte utilizada */
    color: #333; /* Define a cor do texto */
    display: flex; /* Usa o Flexbox para layout; permite elementos filhos se posicionarem em linhas ou colunas flexíveis */
    background-color: #EAEAEA; /* Define a cor de fundo do body */
}

/* Estiliza a barra lateral */
.sidebar {
    flex-basis: 30%; /* Define a largura base do sidebar para 30% do viewport */
    background-color: #F7ECEC; /* Define a cor de fundo do sidebar */
    padding: 40px; /* Adiciona espaçamento interno ao redor do conteúdo do sidebar */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil à direita do sidebar */
}

/* Estiliza a imagem de perfil no sidebar */
.sidebar img {
    width: 80%; /* Define a largura da imagem como 80% da largura do sidebar */
    margin-bottom: 30px; /* Adiciona margem abaixo da imagem */
    border-radius: 10px; /* Arredonda os cantos da imagem */
}

/* Estiliza o conteúdo principal à direita */
.main-content {
    flex-grow: 1; /* Ocupa todo o espaço restante após o sidebar ser renderizado */
    padding: 40px; /* Adiciona espaçamento interno ao redor do conteúdo */
    background-color: #FFF; /* Define a cor de fundo do conteúdo principal */
}

/* Estiliza o cabeçalho do conteúdo principal */
header {
    border-bottom: 2px solid #EAEAEA; /* Adiciona uma linha abaixo do cabeçalho */
    margin-bottom: 20px; /* Adiciona margem abaixo do cabeçalho */
    padding-bottom: 20px; /* Adiciona espaçamento interno abaixo do conteúdo do cabeçalho */
}

header h1 {
    margin: 0; /* Remove a margem padrão do h1 */
}

header h2 {
    margin-top: 10px; /* Adiciona margem acima do h2 */
    color: #888; /* Define a cor do texto do h2 */
    font-size: 20px; /* Define o tamanho da fonte do h2 */
}

/* Estiliza cada seção individual no conteúdo principal */
section {
    margin-bottom: 30px; /* Adiciona margem abaixo de cada seção */
}

section h3 {
    border-bottom: 1px solid #EAEAEA; /* Adiciona uma linha abaixo do subtítulo h3 */
    padding-bottom: 10px; /* Adiciona espaçamento interno abaixo do h3 */
    margin-bottom: 20px; /* Adiciona margem abaixo do h3 */
}
