/* CSS Document */
* {
  box-sizing: border-box;
}
body {
  font-size: 100%;
}
p 	{
	text-align: left;
	}
	
a	{
	color:blue}
	
h1	{
	font-size: 16px;
	}

h2	{
	font-size: 18px;
	color:#24679A;
	}
	
.picture	{
	margin:auto;
	}
	
.pic 	{
	width:100%;
	margin: auto;
	border: 2px solid black;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

img	{
	border:2px solid black;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	}

	
.book	{
	width=188 px; 
	height=227px;
	}	
.grid {
	display:grid;
	
	grid-template-columns:10% 40% 40% 10%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;

	grid-template-areas:
		". nav nav ."
		". banner banner ."
		". header header ."
		". box1 box2 ."
		}
.box1, .box2{
	border:10px solid black;
	}



@media screen and (max-width: 826px) {
  .grid {
	display:grid;
	grid-template-columns:50% 50%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;
	
		grid-template-areas:
		"nav nav"
		"banner banner"
		"header header"
		"box1 box2"
}
	
		
		
/*For cphones*/

@media screen and (max-width: 658px) {
  .grid {
	display:grid;
	grid-template-columns:100%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;
	
	grid-template-areas:
		"nav"
		"banner" 
		"header"
		"box1"
		"box2"
		}
p   {
font-size: 1.25em;
font-family: "Arial";
}
h3	{

	font-size:20px;
	font-weight:strong;
}
h2 {
	font-size:.75em;
	font-weight:strong;
}
h1 {
	font-size.75em;
	font-weight:strong;
}

.header	{
font-size:1em;
}
.box1,.box2{
justify-self: center;
font-size:1em;
}

}