@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,400;0,500;0,700;1,500&family=Montserrat&display=swap');

/* Propriedades que se aplicam a todos os elementos da página. */
* {
	/* Remove a margem externa de todos os lados do elemento. */
	margin: 0;

	/* Remove o espaçamento interno de todos os lados do elemento. */
	padding: 0;

	/* Inclui o preenchimento e a borda na largura e altura. */
	box-sizing: border-box;
}

body {
	/* Exibição flexível.                          */
	/* Torna o elemento um flex container          */
	/* e os seus elementos internos em flex-itens. */
	display: flex;

	/* Quebra de linha quando os itens não couberem na largura da tela. */
	flex-wrap: wrap;

	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 1 1 100vw;

}

/* Formatação comum entre os elementos. */
header, nav {
	/* Cor do fundo. */
	background: #004FE7;

	/* Exibição flexível.                          */
	/* Torna o elemento um flex container          */
	/* e os seus elementos internos em flex-itens. */
	display: flex;

}

nav{
	
	/* Margem externa de todos os lados. */
	margin-top: 1px;
}

/* Seletores para formatação individual. */

header {
	/* Altura do elemento. */
	height: 100px;

	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 1 1 100vw;
}

header #logo {
	/* Exibição flexível.                          */
	/* Torna o elemento um flex container          */
	/* e os seus elementos internos em flex-itens. */
	display: flex;

	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 0 1 200px;

	/* Cor do fundo. */
	/* background-image: as ; */

	/* Alinha os itens na vertical. */
	justify-content: center;

	/* Alinha os itens na horizontal. */
	align-items: center;

	height: 70px;
}

#logo > img{
	height: 50px;
	position: absolute;
	top: 25px;
	left: 20px;
}

#openMenu, #closeMenu {
	/* Remove a borda. */
	border: none;

	/* Remove a cor de fundo. */
	background: none;

	/* Tamanho da fonte. */
	font-size: 30px;

	/* Espessura da forte. */
	font-weight: bold;

	/* Margem ao redor do elemento              */
	/* (superior, direito, inferior e esquerdo) */
	padding: 0px 5px 0px 5px;

	/* Muda o cursor do mouse para ponteiro.*/
	cursor: pointer;

	/* Oculta o elemento. */
	display: none;

	color: aliceblue;
}

nav {
	/* Alinha os itens na vertical. */
	justify-content: center;

	/* Alinha os itens na horizontal. */
	align-items: center;

	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 1 1 100%;

	/* Altura do elemento. */
	height: 50px;
}

nav a {
	/* Margem de todos os lados. */
	margin: 0 3%;

	/* Tamanho da fonte. */
	font-size: 12pt;

	color: aliceblue;
	font-family: Montserrat;
	font-style: normal;
	line-height: normal;
	font-weight: 600;
}


a {
	/* Remove a decoração padrão do elemento. */
	text-decoration: none;

	/* Definir a cor da fonte para o padrão do elemento pai. */
	color: inherit;
}


footer{
	position: relative;
	bottom: 0px;
	width: 100%;
	background-color: #004FE7;
	height: 300px;
	display:flex ;
	align-items: center;
	text-align: center;
	justify-content: center;
}

#footer-contents{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 30px;
}

#logo-social > img{
	height: 50px;
}

#logo-social{
	display: flex;
	flex-direction: column;
}

#social{
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	font-size: 24px;
}

#facebook{
	margin-top: 10px;
	margin-bottom: 10px;
}


#social-content{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


#site-content{
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-family: Montserrat;
	text-align: left;
	color: aliceblue;
	font-size: 14px;
}

#acervo{
		display: flex;
	flex-direction: column;
	gap: 5px;
	font-family: Montserrat;
	text-align: left;
	color: aliceblue;
	font-size: 14px;
}

#footer_copyright{
	position: absolute;
	bottom: 0px;
	background-color: white;
	color: black;
	width: 100%;
	line-height: 30px;
	font-size: 12px;
	font-weight: 600;
	font-family: Montserrat;
}

/* Altera o estilo dos elementos para serem apresentados */ 
/* em telas menores que 717px. */
@media only screen and (max-width: 717px) {
	#openMenu, #closeMenu {
		/* Retorna a visibilidade padrão. */
		display: block;
	}

	#openMenu {
		/* Espaço a esquerda será preenchido automaticamente
		   colocando os itens a direita. */
		margin-left: auto;
	}

	#closeMenu {
		/* Torna a posição do elemento fixa. */
		position: absolute;

		/* Dispõe o elemento a 15px da esquerda. */
		right: 15px;

		/* Dispõe o elemento a 15px do topo. */
		top: 15px;

		color: black;
	}

	#menu > a{
		color: black;
	}

	nav {
		/* Torna a posição do elemento fixa. */
		position: absolute;

		top: 0px;

		/* Ocupa 100% da largura da tela de exibição. */
		width: 100vw;

		/* Ocupa 100% da altura da tela de exibição. */
		height: 100vh;

		/* Cor em RGB, mais transparência. */
		background: rgba(255, 255, 255, 0.8);

		/* Dispõe os itens em coluna. */
		flex-direction: column;

		/* Alinha os itens na horizontal. */
		align-items: center;

		/* Alinha os itens na vertical. */
		justify-content: center;

		/* Remove a margem externa de todos os lados do elemento. */
		margin: 0;

		/* Oculta o elemento. */
		display: none;

		/* Invisivel */
		opacity: 0;

		/* Velocidade de transição de um estado para outro. */
		transition: 0.3s;

	}

	nav a {
		/* Margem de todos os lados. */
		margin: 3%;
	}

	#menu{
		color: rgb(0, 0, 0);
		position: absolute;
		display: none;
		z-index: 2;
	}
	aside {
		height: 100px;
	}

	footer{
		display: flex;
		flex-direction: column;
		height: 600px;
	}

	#footer-contents{
		display: flex;
		flex-direction: column;
	}

	#site-content{
		text-align: center;
	}

	#acervo{
		text-align: center;
	}
}