html{
font-family: helvetica, arial, sans-serif;
line height: 1.4;
font-size: 18px;
}

/*formatacao CSS de cores e texto para formularios de entrada de dados, criado 2022-06-17*/

@media screen and (min-width: 300px){
	html{
		font-size: 8px
	}
}

@media screen and (min-width: 600px){
	html{
		font-size:10px
	}
}


@media screen and (min-width: 900px){
	html{
		font-size:14px
	}
}

@media screen and (min-width: 1500px){
	html{
		font-size:16px
	}
}

@media screen and (min-width: 1900px){
	html{
		font-size:22px
	}
}

@media screen and (min-width: 2400px){
	html{
		font-size:28px
	}
}


body {
/*background-image: url(Background1.jpg)*/
/*background-color: #004080; */
/*background-color: #4E5CD9; */
background-color: #7091E6; 

/*background-color: #008c8c;*/
padding: 0px;
margin: 0px;
}

#buttonholder1{
	width: 30%;
	height: 6%;
	float: left;
	background-color: #3D52A0;
	
	/*background-color: #006A67;*/
	text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
	margin-top: auto;
	margin-bottom: auto;
	box-sizing: border-box;
	}

#buttonholder2{
	width: 15%;
	height: 6%;
	float: left;
	background-color: #3D52A0;
	
	/*background-color: #006A67; */
	text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
	margin-top: auto;
	margin-bottom: auto;
	box-sizing: border-box;
	}

#heading{
	width: 55%;
	height: 6%;
	float: left;
	background-color: #3D52A0;

	/*background-color: #006A67; */
	color: white;
	text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

#logo{
	max-height:80%;
	width: 50%;
	background-color: default;
	}

#thumbsup{
	height:80%;
	/*width: 50%;*/
	background-color: default;
	}


#thumbsup:hover{
	height:95%;
	/*width: 50%;*/
	background-color: default;
	}







#infotitletop{
	width: 90%;
	height: 5%;
	margin-top: 15px;
	margin-left: 2%;
	margin-right: 8%;
	padding-left:8px;
	/*background-color: 0059b3;*/

	background-color: #3D52A0; /* darker marrs green*/
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 16px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: flex-end;
	box-sizing: border-box;
	}



#infotitle{
	width: 90%;
	height: 5%;
	margin-left: 2%;
	margin-right: 8%;
	padding-left:8px;
	margin-top: 16px;
	/*background-color: 0059b3;*/

	background-color: #3D52A0; /* darker marrs green*/
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 16px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: flex-end;
	box-sizing: border-box;
	}


#info1{
	width: 90%;
	height: 6%;
	min-height: 25px;
	margin-left: 2%;
	margin-right: 8%;
	padding-left:8px;
	background-color: default;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 24px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


#info2{
	width: 90%;
	height: 6%;
	min-height: 25px;
	margin-left: 2%;
	margin-right: 8%;
	padding-left:8px;
	background-color: default;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 24px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


#info3{
	width: 90%;
	height: 6%;
	min-height: 25px;
	margin-left: 2%;
	margin-right: 8%;
	padding-left:8px;
	background-color: default;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 24px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


#bucket1left{
	width: 50%;
	height: auto;
	min-height: 80%;
	background-color: default;
	float: left;
	text-align:center;
	color: white;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	border-style: solid;
	border-color: blue;
	border-width: 0px 0px 0px 0px; /*top, right, bottom, left */
	}


#bucket1right{
	width: 50%;
	height: auto;
	min-height: 80%;
	background-color: default;
	opacity: 1;
	float: left;
	box-sizing: border-box;
	}


#descriptiontitle{
	width: 90%;
	height: 5%;
	margin-left: 2%;
	margin-right: 8%;
	margin-top: 16px;
	padding-left:8px;
	/*background-color: 0059b3;*/

	background-color: #3D52A0; /* darker marrs green*/
	float: left;	
	box-sizing: border-box;
	}

#thetitle{
	width: 70%;
	height: 100%;
	margin-left: 0%;
	padding-left:0px;
	background-color: default;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 16px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: flex-end;
	box-sizing: border-box;
	}

#stars{
	width: 30%;
	height: 100%;
	margin-left: 0%;
	padding-right:15px;
	background-color: default;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 28px;
	color: white;
		display: flex;
		justify-content: right;
		align-items: center;
	box-sizing: border-box;
	}


#url{
	width: 40%;
	height: 100%;
	margin-left: 0%;
	padding-right:20px;
	background-color: default;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 14px;
	color: white;
		display: flex;
		justify-content: right;
		align-items: flex-end;
	box-sizing: border-box;
	} 

a:link{
	color: #b8b8ff;
	}

a:visited{
	color: #a8a8ff;
	}

a:hover{
	color: #e6e6ff;
	}






#description{
	width: 90%;
	height: auto;
	max-height: 40%;
	margin-left: 2%;
	margin-right: 8%;
	margin-top: 1%;
	overflow: auto;
	padding-top:8px;
	padding-left:8px;
	padding-right:8px;
	padding-bottom:8px;
	
	background-color: default;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 18px;
	line-height: 1.5;
	color: white;
		display: flex;
		justify-content: left;
		align-items: flex-start;
	box-sizing: border-box;
	}


#procon{
	width: 90%;
	height: 16%;
	margin-left: 2%;
	margin-right: 8%;
	background-color: grey;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 18px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


#pro{
	width: 50%;
	height: 100%;
	background-color: default;
	float: left;	
	box-sizing: border-box;
	}


#con{
	width: 50%;
	height: 100%;
	background-color: default;
	float: left;	
	box-sizing: border-box;
	}


#pro1{
	width: 100%;
	height: 33.33%;
	min-height: 15px;
	margin-left: 0%;
	background-color: #375472;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 14px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


#pro2{
	width: 100%;
	height: 33.33%;
	min-height: 15px;
	margin-left: 0%;
	background-color: #617681;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 14px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}

#pro3{
	width: 100%;
	height: 33.33%;
	min-height: 15px;
	margin-left: 0%;
	background-color: #375472;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 14px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


#con1{
	width: 100%;
	height: 33.33%;
	min-height: 15px;
	margin-left: 0%;
	background-color: #617681;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 14px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


#con2{
	width: 100%;
	height: 33.33%;
	min-height: 15px;
	margin-left: 0%;
	background-color: #375472;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 14px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}

#con3{
	width: 100%;
	height: 33.33%;
	min-height: 15px;
	margin-left: 0%;
	background-color: #617681;
	float: left;	
	font-family: 'Arial' 'sans-serif';
	font-size: 14px;
	color: white;
		display: flex;
		justify-content: left;
		align-items: center;
	box-sizing: border-box;
	}


/*
#img{
	background-color: white;
	height:100%;
	max-width: 100%;
	padding: 2px 2px;
	font-size:1.1em;
	border: 1px solid grey;
	color:black;
	border-radius: 4px;
	margin-left: 0px;
	}
*/


/*adjust image size to fit div*/
#images{
	max-height: 99%;
	width: 92%;
	object-fit: cover;
	
	background-color: default;
	float: center;
	text-align:center;
	margin: 0px;
	border: 1px solid grey;
	}

#footer{
	width: 100%;
	height: 13%;
	float: left;
	/*background-color: #0059b3;*/
	background-color: default;
	opacity: 1;
	font-family: 'Arial' 'sans-serif';
	font-size: 18px;
	color: white;
		vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	}

/* ****************** BUTTONS ********************* */

#close{
	height:60%;
	width: 60%;
	border-radius:3px;
	background-color: default;
	opacity: 1;
	font-size:1.3em;
	font-family: 'Arial' 'sans-serif';
	color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 0px solid #00bfff;
	margin-top: 0%;
	}

#close:hover{
	/*background-color: #18da8d;*/

	background-color: #00FCF7; /*lighter marrs green*/
	color: black;
	}