*{font-family: "Pliant", sans-serif;}

html, body{
	margin: 0 auto;
	padding: 0 ;
	display: grid;
	place-items: center;
	width: 100%;            /* 100% rather than vw here to avoid horizontal scrollbar */
}

header{
	margin-top: 30px;
	margin-bottom:30px;
	height:100px;
	text-align:center;
	line-height:100px;
	font-size:40px;
	font-family: "Gabarito", sans-serif;
	color:white;
	background-color: #8B0000 ; /* #AE535A */
	width: 50%;
	border-radius: 25px 25px 25px 25px;
}

footer{
	margin-top: 30px;
	margin-bottom:30px;
	height:100px;
	border:solid;
	border-color: #8B0000;
	width: 50%;
	border-radius: 25px;

	display: flex;
  	align-items: center;
	float:left;
}

/* page content */

#content{                          /* content is designed with id rather than class bc it appears only one and take the entire page*/
	padding: 30px;   
	overflow-wrap:anywhere;        /* overflow-wrap: break-word is not compatible with box-sizing: border-box */
	box-sizing: border-box;          /* the width is calculated from box border and not box content */
	width: 50%;
	text-align: left;
	border:solid;
	border-color: #E3735E ; /* sky blue #85c1e9 */
	border-radius: 25px;            /* defines how rounded the corners are */
	font-size:18px;
}

/* titles */

h2{
	padding-top: 10px;
}

/* content home */
#text_div{
	width: 90%;                /* 60% when margin background is 30px    */
	margin: auto;
}

#tissue_search{
	width: 49.3%;                 /* 25% when margin background is 30px    */
	height: 150px;
	color: black;
	background-color: rgb(190, 120, 107, 0.6); /* rgb(83,173,166, 0.3); */
	left: 5%;               /* 20% when margin background is 30px    */
	margin-top: 30px;
	float:left;
	border-top-left-radius: 25px;  
}

#gene_search{  
	width: 39.3%;
	height: 150px;
	color: black;
	background-color: rgb(237, 168, 154, 0.6); /*rgb(83,173,166, 0.3); */
	right: 5%;
	margin-top: 30px; 
	float:right;
	border-top-right-radius: 25px; 
}

#blast_button_prot{  
	width: 34.3%;
	height: 150px;
	color: black;
	background-color: rgb(215, 117, 98, 0.6); /* rgb(133,193,233, 0.3); */
	left: 5%;
	margin-top: 10px;
	float:left;
}

#blast_button_gen{  
	width: 54.3%;
	height: 150px;
	color: black;
	background-color: rgb(199, 101, 82, 0.6); /* rgb(133,193,233, 0.3); */
	right: 5%;
	margin-top: 10px;
	float:right;
}

#id_conv_button{  
	width: 58.6%;
	height: 100px;
	color: black;
	background-color: rgb(215, 140, 98, 0.6); /* rgb(133,193,233, 0.3); */
	left: 5%;
	margin-top: 10px;
	float:left;
}

#ortho_conv_button{  
	width: 30%;
	height: 100px;
	color: black;
	background-color: rgb(165, 123, 115, 0.6); /* rgb(133,193,233, 0.3); */
	right: 5%;
	margin-top: 10px;
	float:right;
}

#heatmap_button{  
	width: 44.3%;
	height: 120px;
	color: black;
	background-color: rgb(199, 101, 82, 0.6); /* rgb(133,193,233, 0.3); */
	left: 5%;
	margin-top: 10px;
	float:left;
}

#jbrowse_button{  
	width: 44.3%;
	height: 120px;
	color: black;
	background-color: rgb(237, 168, 154, 0.6); /* rgb(133,193,233, 0.3); */
	right: 5%;
	margin-top: 10px;
	float:right;
}

#resource_button{  
	width: 90%;
	height: 100px;
	color: black;
	background-color: rgb(243, 158, 134, 0.6); /* rgb(133,193,233, 0.3); */
	left: 5%;
	margin-top: 10px;
	margin-bottom: 25px;
	float:left;
	border-bottom-left-radius: 25px; 
	border-bottom-right-radius: 25px; 
}

#tissue_search,
#gene_search,
#blast_button_prot,
#blast_button_gen,
#id_conv_button,
#ortho_conv_button,
#heatmap_button,
#jbrowse_button,
#resource_button{
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:23px;
}

.links_home{
	text-decoration: none;
	font-size: 19px;
	display: block;
}

/* adjust to all screen size */ 
/* needs to be after the style blocks it is overriding */ 

@media screen and (max-width: 1600px) {
  header, footer, #content {
    width: 60%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media screen and (max-width: 1200px) {
  header, footer, #content {
    width: 75%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media screen and (max-width: 1000px) {
  header, footer, #content {
    width: 90%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media screen and (max-width: 500px) {   /* for mobiles */
	header, footer {
		width: 95%;
		margin-top: 20px;
		margin-bottom: 20px;
  }

  #content {
	width: 95%;
	padding: 15px;
  }

}