*{
	margin: 0;
	padding: 0;	
}
html{	
	background-image:url('../img/tiny_grid.png'); 
	font-size: 100%;
}
body{
	max-width: 1280px; 
	margin: 1.5rem auto 1rem auto;
	background-color: white;
	-webkit-box-shadow: 0px 8px 15px rgba(50, 50, 50, 0.96);
	-moz-box-shadow:    0px 8px 15px rgba(50, 50, 50, 0.96);
	box-shadow:         0px 8px 15px rgba(50, 50, 50, 0.96);
	border-top: 0.5rem solid black;	
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
header{
	text-align: center;
	margin-top: 1rem;
}
header h1{
	font-size: 3rem;
}
header .header_panel{
	display: inline-block;
	max-width: 600px;	 
	vertical-align: middle;
}
header img{
	max-height: 250px;
	width: auto;
}
section{	 
	margin: 0 auto;
	text-align: center;
}
#data .panel{
	display: inline-block;
	max-width: 620px;	
	vertical-align: top;
	font-weight: bolder;
	font-size: 1.5rem;	 
}
#data .panel:nth-child(1){
	padding: 0 2rem 2rem 0;
	border-right: 5px dashed black;
	text-align: left;
}
#data .panel:nth-child(2){
	
}
#data .panel:nth-child(2) img{	 
	max-width: 450px;
	z-index: -1;
}
#data .panel #draw_height{
	position: relative;
	top: 210px;
	left: 76px;	
}
#data .panel #draw_width{
	position: relative;
	top: 240px;
	left: 170px;	
}
#data .panel #draw_length{
	position: relative;
	top: 210px;
	right: 160px;	
}
select, input{
	border: 3px solid black;
	font-size: 1rem;	
	padding: 0.3rem;	
	margin: 0.5rem 0;	
}
label{
	font-weight: bold;
	font-size: 1.5rem;
}
#input_materials{	
		 
}
#maturity_times{		 
	display: none;
}	
#input_data{	 
	text-align: left;
	display: none;
}
#result{
	display: none;	
	margin-top: 1rem;
	font-weight: bolder;
	font-size: 1.5rem;	
}
#result h2{
	font-size: 2rem;
	border-top: 5px dashed black;
	display: block;
	padding: 2rem;
}
#statement{
	margin: 2rem 2rem;
	font-size: 1rem;
	border-left: 4px solid orange;
	padding-left: 1rem;
}
footer{
	padding: 1rem 0;
	background-color: #161719;
	text-align: center;
	font-size: 1.5rem;
	color: white;
}

@media (max-device-width: 650px){
	html{
		font-size: 70%;
	}
	body{
		margin: 0 auto 0 auto;		 
		width: 100%;

			-webkit-box-shadow: none;
	-moz-box-shadow:    none;
	box-shadow:         none;
	}
	#data .panel:nth-child(1){
		padding: 0 0 2rem 0;
		border-right: none;
		text-align: left;
	}
	#data .panel:nth-child(2) img{	 
		max-width: 320px;	 
	}
	#data .panel #draw_height{
		position: relative;
		top: 148px;
		left: 58px;	
	}
	#data .panel #draw_width{
		position: relative;
		top: 170px;
		left: 120px;	
	}
	#data .panel #draw_length{
		position: relative;
		top: 150px;
		right: 120px;	
	}
}