/* Configurações básicas */
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Container principal com Flexbox */
.container {
	display: flex;
	flex-direction: column; /* Coloca os elementos em coluna por padrão */
	gap: 20px; /* Espaço entre os elementos */
	padding: 20px;
	max-width: 1200px; /* Largura máxima para telas maiores */
	margin: 0 auto; /* Centraliza o container */
}

/* Estilo dos blocos */
.conteudo, .sidebar {
	background-color: #f4f4f4;
	padding: 20px;
	border-radius: 8px;
}

/* Cabeçalho e Rodapé */
header, footer {
	background-color: #333;
	color: white;
	text-align: center;
	padding: 1rem 0;
}

header h1, footer p {
	margin: 0;
}

/* Media Query para telas maiores (desktops e tablets em modo paisagem) */
@media (min-width: 768px) {
	.container {
		flex-direction: row; /* Altera para linha em telas maiores */
	}

	.conteudo {
		flex: 2; /* O conteúdo ocupa o dobro do espaço da barra lateral */
	}

	.sidebar {
		flex: 1; /* A barra lateral ocupa 1 parte do espaço */
	}
}