@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html, body{
	height:100%;
	font-family:'Roboto Mono', monospace;
	
}
#container{
	display:flex;	
	flex-direction:column;
	min-height:94vh; /*garante que o container ocupe pelo menos a altura do viewport*/
	
}
.logo_pesquisa{
	display:flex;
	flex-direction:row;
	width:70%;

}
#logo{
	margin:0;
	}
main{	
	flex:1; /*faz com que o main ocupe todo o espaço disponivel aicma do footer*/
	background-color:#B4BEC9;
	display:flex;
	flex-direction:column;
	align-items:center;
	
	color:#002333;
	gap:0.8rem;
}
#pesquisar{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:0.5rem;
	margin:3rem auto;
	
}
label{
	font-size:1.7rem;
	font-weight:bold;
	letter-spacing:0.2em;
}
input{
	width:70%;
	padding:0.5rem;
	border-radius:0.5rem;
	border: 1px solid #ccc; /* Adicionado borda padrão */

}
button{
	width:60%;
	padding:0.4rem;
	background-color:#000233;
	color:#fff;
	border:none;
	border-radius:0.5rem;
	cursor:pointer;
}
button:hover{
	background-color:#000466;
}

button:active{
	background-color:#000699;
}
.resultado_pesquisa{
	width:50%;
	margin:-3rem auto 2rem auto;
	font-family:'Open Sans' monospace;
	font-size:1rem;
	height:660px;
	overflow-y:scroll;
	display:flex;
	flex-direction:column;
	gap:1rem;
	

}
.item_result{
	background-color:#f4f4f4;
	display:flex;
	flex-direction:column;
	gap:1rem;
	width:98%;
	padding:2rem;	
	border-radius:1rem;
	
}
.titulo_img{
	height:10rem;
	width:80%;
	display:flex;
	margin:auto;
	flex-direction:row;
	justify-content:space-around;
	align-items:center;
	gap:10rem;
}
img{
	width:14rem;
	border-radius:1rem;
	margin-top:2rem;
}

footer{
	background-color:#002333;
	color:#ccc;
	padding:1rem;
	font-size:0.8rem;
	text-align:center;
	
}