/*Importação da fonte das mensagens diárias, é uma fonte que simula a escrita à mão*/
@import url('https://fonts.googleapis.com/css?family=Sofia&display=swap');

/* CSS de uso geral no index */
html {
	/*Scroll suave para mostrar os conteúdos*/
	scroll-behavior: smooth;
}

/* CORES exclusivas do index */
#rolando{background-color:#ff66cc;}
#videos{background-color:#D21917;}
#historias{background-color:#3F48CC;}
#mensagens{	background-color:#B5E61D;}
#links{background-color:#FF7F27;}
#arquivos{background-color:#F8D763;}

/* Parte do background com o wallpaper da mente */
#bg-imagem {
	/* A imagem de fundo foi convertida para .webp a fim de poupar tempo */
	background-image: url('../imagens/background.webp') !important;
	background-position: center center;
	
	/* Borra a imagem e regula a área que fica branca com o blur */
	Filter: blur(4px);
	-webkit-filter: blur(2px);
	margin: -6px 12px -12px -6px;
	width: 100%;
	height: 105vh;
	
	position: absolute;
	top: 0%;
	left: 0%;
}
@media screen and (min-width: 1050px) {
    #bg-imagem {
		background-color: #000 !important;
		background-repeat: no-repeat !important; 
		background-size: contain !important;
	}
}
@media only screen and (max-width: 420px){
	#bg-imagem {
		margin: 0;
	}
}

/*Texto que sintetiza o GAPsi*/
#resumo-gapsi {
	width: 100vw;
	height: 100vh;
}
#texto {
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 100%;
}

#titulo {
	font-size: 50px;
	letter-spacing:3px;
}
@media screen and (min-width: 421px) and (max-width: 900px) {
    #titulo {
		font-size: 29px;
		letter-spacing:2px;
	}
}
@media only screen and (max-width: 420px){
	#titulo {
		font-size: 24px;
		letter-spacing:1px;
	}
}

#sintese {
	font-size:24px;
	width: 65vw;
	text-align:center;
}
@media screen and (min-width: 421px) and (max-width: 900px) {
    #sintese {
		font-size: 23px;
		width:70vw;
	}
}
@media only screen and (max-width: 420px){
	#sintese {
		font-size: 15px;
		width:78vw;
	}
}

#call-to-action {
	background-color: #3FB7AB;
	margin: 20px 0 0 0;
	padding: 17px 20px;
	border: none;
	border-radius: 25px;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

/* Parte dos anúncios */
.titulo-anuncios {
	font-size: 29px;
	letter-spacing:1px;
	margin: 0 0 10px 0;
}
@media screen and (min-width: 421px) and (max-width: 900px) {
	.titulo-anuncios {
		font-size:24px;
	}
}
@media only screen and (max-width: 420px){
	.titulo-anuncios {
		font-size:19px;
	}
}

.imagem-bloco {
	width:90vw;
	height:auto;
	margin: 0 0 60px 0;
	border-radius: 25px;
}

/* Parte das mensagens de inspiração */
.bloquinho {
	width: 360px;
	height: 280px;
	font-family: 'Sofia', cursive;
	background-color:#8459A1;
	margin:15px;
	padding:0 20px;
	font-size:16px;
}
@media only screen and (min-width: 1025px) and (max-width: 1600px){
	.bloquinho{
		width: 330px;
		height: 245px;
	}
}
@media only screen and (min-width: 351px) and (max-width: 420px) {
	.bloquinho{
		width: 300px;
		height: 225px;
		font-size:15px;
	}
}
@media only screen and (max-width: 350px){
	.bloquinho{
		width: 250px;
		height: 225px;
		font-size:14px;
	}
}

/* Parte das categorias */
.titulo-menor {
	margin: 10px 0 0 0;
	font-size: 19px;
	letter-spacing:1px;
}

.bloco_categoria {
	margin: 20px 60px 40px 60px;
}

.bloco-acervo {
	width: 480px;
	height: 300px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
	margin: 0 0 5px 0;

}
@media only screen and (max-width: 500px){
	.bloco-acervo {
		width: 300px;
		height: 187px;
	}
}

.icone_awesome:before{
	display: inline-block;
}
.fa-newspaper, .fa-play-circle, .fa-comments, .fa-sticky-note, .fa-rocket, .fa-folder {
	font-size:120px;
	color:black;
}
@media only screen and (max-width: 420px){
	.fa-newspaper, .fa-play-circle, .fa-comments, .fa-sticky-note, .fa-rocket, .fa-folder {
		font-size:80px;
	}
}

/* Parte com os créditos ao criador do site */
#credito {
	padding: 20px 40px;
}
#nome {
	text-decoration: none;
	transition: 0.3s;
}
#nome:hover {
	color:#3FB7AB;
}

/* -------------- Estilos do slider ----------------------- */

/* Estilo do bloco total que mostra os slides */
.slider-imagens {
	position: relative;
	margin: auto;
	height: 30vh;
}
@media only screen and (min-width: 801px){
	.slider-imagens {
		margin: 12vh 0 15vh 0;
	}
}

/* Estilo de cada bloco contendo uma imagem individual */
.pagina-individual img {
	object-fit: cover;

	width: 90vw;
	height: 30vh;
}
@media only screen and (min-width: 801px){
	.pagina-individual img {
		width: 90vw;
		height: 50vh;
	}
}

/* Botões de slide anterior e próximo slide */
.seta-anterior, .seta-proximo {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}
.seta-proximo {
	right: 0;
	border-radius: 3px 0 0 3px;
}
.seta-anterior {
	left: 0;
	border-radius: 3px 0 0 3px;
}
.seta-anterior:hover, .seta-proximo:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Estilo do contador de qual é a página atual */
.contador-pagina {
	color: #f2f2f2;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 0 3px 3px 0;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}