/* Mobile first */ 

* {
  margin: 0;
  padding: 0;
  background: #eee;
	font-family: "Verdana", "Arial", "Garamond", sans-serif;
	font-size: .97em;
}

.header {
	display: grid;
	grid-gap: 10px;
	padding: 10px 50px;
	grid-template-rows: 180px;
	grid-template-columns: 338px; 
}

#pic {
	justify-self: center;
	align-self: center;
}

.headright {
	display: grid;
	grid-column-gap: 5px;
	grid-template-rows: repeat(4, 1fr);
  grid-template-columns: 338px; 
  padding: 0 20px;  
}


.links {
	display: grid;
	grid-template-columns: 
	repeat(auto-fill, minmax(90px, 1fr)); 
	justify-items: center;
}

.cntr {
	justify-self: center;
}

.books {
	display: grid; 
	grid-gap: 10px;
	padding: 50px;
	grid-auto-rows: minmax(170px, auto);
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	align-items: start;
	justify-items: center;
}

.books > div {
	display: grid;
	grid-template-columns: auto;
	grid-auto-rows: minmax(50px, auto);
}

.books > div > a > p {
	padding-top: 5px;
	padding-bottom: 15px;
	font-size: .6em;                  
}

/* unvisited link */
a:link {
  color: #365899;
	text-decoration: none;
}

/* visited link */
a:visited {
  color: #365899;
}  

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}





/* PC changes or overrides */

@media screen and (min-width: 768px) {
	.header {
		grid-template-columns: 338px auto; 
	}

	.headright {
		grid-template-columns: auto; 
	}
}  
 
.footer {
	display: grid;
	padding: 0 50px 50px 50px;
	align-items: start;
}

#ftp1, #ftp2, #ftp3 {
	padding: 10px;
	text-align: center;
}


h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
	text-align: center;
}
h2 {
  display: block;
  font-size: 1em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
	text-align: center;
}