@charset="UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

/*Variáveis das cores do site*/
:root {
	--principal: #eeeeee; /**/
	--caixa: #ffffff; /*Cinza muito claro*/
	--caixa-inverso: #000000; /*Cinza muito escuro*/
	--texto: #000000; /*Cinza muito escuro*/
	--texto-inverso: #ffffff; /*Cinza muito claro*/

	--destaque: #2186ca; /*Azul mar*/
	--destaque-inverso: #eeeeee; /*Amarelo ouro  ffd700 */

	--destaque2: #94c5ee; /*Azul ceu*/
	--destaque2-inverso: #efc700; /*Amarelo ouro escuro*/
	--destaque3: #009900; /*Verde floresta*/
	--destaque3-inverso: #009900; /*Verde floresta*/
}

html {
	font-size: 16px;
}
/*
PADRÕES USADOS PARA FONT-SIZE:
12px => 0.75rem
14px => 0.875rem
16px => 1rem
19px => 1.2rem
21px => 1.3rem
22px => 1.4rem
24px => 1.5rem
26px => 1.6rem
29px => 1.8rem
32px => 2rem
*/
body {
	font-family: FreeSans, Verdana, Tahoma, "Courier Novo", Arial, FreeSerif, sans-serif, Garamond, "Times New Roman";
	font-size: 1.2rem;
	color: var(--texto);
	line-height: 1.6rem;
	background-color: var(--principal);
}

.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 40px 1fr auto;
	justify-content: cemter;
/*	gap: 10px; */
	grid-template-areas: 
		"header"
		"nav"
		"conteudo"
		"footer";
}

.header {
	grid-area: header;
	width: 100%;
	max-height: 100px;
	display: flex;
	justify-content: center;
	background-image: url("../imagens/fundo-cabecalho100.png");
	background-repeat: repeat-x;
}

.cabecalho {
	max-width: 600px;
	height: auto;
}

.cabecalho > a > img {
	max-width: 100%;
	height: auto;
	z-index: 1;
}

.nav {
	grid-area: nav;
	width: 100%;
	height: 40px;
	margin: 1px 0;
	padding: 0 60px;
	display: flex;
	justify-content: center;
	background-color: var(--destaque);
}

.nav > .menu { border-left: 1px solid #ffffff; border-right: 1px solid #ffffff;
	width: 100%;
	height: 40px;
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.nav > .menu > a {
	width: 120px;
	height: 30px;
	margin: 0 5px;
	padding: 5px;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	background-color: var(--destaque);
	color: var(--destaque-inverso);
	font-weight: bold;
}

.nav > .menu > a:hover {
	background-color: var(--destaque-inverso);
	color: var(--destaque);
	transition: background-color .5s;
}

/* CONTEÚDO PRINCIPAL COM ASIDE E MAIN */
.conteudo {
	grid-area: conteudo;
	margin: 10px 60px;
	display: flex;
	justify-content: center;
}

.aside {
	width: 20%;
	margin: 10px 10px 10px 0px;
	padding: 20px;
	border: 1px solid #cccccc;
	border-radius: 12px;
	background-color: var(--caixa);
/*	box-shadow: 1px 1px 4px;*/ /* direita:1px baixo:1px desfoque:4px */
}

.img-link {
	max-width: 100%;
	height: auto;
}

.main {
	width: 80%;
	margin: 10px 0px 10px 10px;
	padding: 20px;
	border: 1px solid #cccccc;
	border-radius: 12px;
	background-color: var(--caixa);
/*	box-shadow: 1px 1px 4px;*/ /* direita:1px baixo:1px desfoque:4px */
}

article, section {
	margin-bottom: 20px;
}

.main > article > img {
	min-width: 20%;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.main > section > img {
	min-width: 20%;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

h1 {
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 1.6rem;
}

h2 {
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 1.4rem;
}

h3 {
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 1.2rem;
}

h4, h5, h6 {
	font-size: 1rem;
	text-align: center;
	margin-bottom: 1rem;
}

p {
	font-size: 1rem;
	text-indent: 3rem;
	text-align: justify;
	margin-bottom: 1rem;
	color: var(--texto);
}

p.aside1 {
	text-align: left;
	text-indent: 0;
}

.footer {
	grid-area: footer;
	width: 100%;
	height: auto;
	padding: 10px 60px; /* ATENÇÃO PARA CONFERIR SE É MARGIN OU PADDING COM NAV E O CONTEUDO*/
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: var(--destaque);
	color: var(--destaque-inverso);
}

.rodape-lateral-esq {
	width: 20%;
	height: auto;
	margin: 10px 10px 10px 0px;
	text-align: center;
	vertical-align: center;
}

.rodape-central {
	width: 50%;
	height: auto;
	margin: 10px;
	text-align: center;
}

.rodape-lateral-dir {
	width: 20%;
	height: auto;
	margin: 10px 0px 10px 10px;
	text-align: center;
}