body {
	background-color:#e6caaf;
	margin:auto;
	padding:60px;
	color: #0f3449;
}

/*-----START grid styling----*/
/*-----
Colors are: 
#042C5C
#0D66BA
#B0A37B
#4B432B
#5D6B6B
----*/

.wrapper {
	display:grid;
	grid-template-columns: 300px 2fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"logo banner banner"
		"nav nav nav"
		"main main side"
		"footer footer footer";
	grid-gap:7px;
}
/*-----END grid styling-----*/


/*START ----- area styling-----*/
.box {
	padding: 20px;
	background-color: #ddd;
	font-family: 'EB Garamond', serif;
	border:solid 3px #666666;
	}

/*START-----Area COLORING-----*/

/*logo, banner, footer are the same colour*/
.logo, .banner, .footer {
	background-color: #042C5C /*dark Purple*/
	}

/*set fonts on dark areas to white*/
/*.logo, .banner, .footer, .side {
	color: #fff;
	}*/

.banner, .footer, .nav, .side, .footer, .main{
border-radius:20px;
}	
	
.logo {
grid-area:logo;
padding: 0px;
height: 200px;
width:300px;
border-radius: 5px;
}

.img{
max-width:100%;
max-height:100%;
}
	
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
}

.banner {
grid-area:banner;
font-size: calc(1vw + 10px);
}

.nav {
grid-area:nav;
background-color: #B0A37B;
font-size:150%;
text-align: center;
}

.main {
grid-area:main;
background-color: #ffeedd;
}

.side {
grid-area:side;
background-color: #0D66BA
}

.footer {
grid-area:footer;
text-align:right;
color: white
}

.main h2 {color:black;}

.main h3 {color:#885566;}
/*END----- area styling-----*/

h1, h2{
font-family: 'EB Garamond', serif;
color:white;
margin-top:0;
}

/*navigation links*/
.nav a {
font-weight: bold;
text-decoration: none
}

.nav a:link, .nav a:visited {
color: #3081cf
}

.nav a:hover {
color: #7fd2fb; 
}

/*links to sites*/
a {font-weight: bold}
a:link{color:#7fd2fb}
a:visited{color:#3081cf}
a:hover{color:#3b494b}
a{text-decoration: none}

/*styling libraries list*/
li:before {
content: "\f02d";
font-family: 'EB Garamond', serif;
color:#FFEEDDB3; /* or whatever color you prefer */
margin-right: 4px;
margin-left: -30px
}

li { list-style-type: none;}

/*styling libraries list on the Contact page*/

#books {
width:85%;
height:auto;
border-radius:50%;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.8)
}

#imagecenter{
text-align: center
}

/*styling Conact Form iframe*/
#contact {
width:100%;
}


/*sub_heading styling*/
.sub_heading {

color:#593849;
font-weight:bold;
}

/*styling list on nonFiction page*/
.nonFic li i{
font-size:0.8em;
}