body {
	color:#000;
	margin:auto;
	padding:60px;
}

/*-----START grid styling----*/
.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:4px;
}
/*-----END grid styling-----*/

/*START ----- area styling-----*/
.box {

	padding: 20px;
	background-color: #ddd;
	font-family: 'Open Sans', sans-serif;
	border-radius:15px;
	border:solid 3px #666666;
	}

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

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

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

.logo {
grid-area:logo;
padding: 0;
height: 200px;
width:300px;
}
	
.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: #ddbb99;
font-size:150%;
text-align: center;
}

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

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

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

.main h2 {color:black;}

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

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

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

.nav a:link, .nav a:visited {
color: #885566
}

.nav a:hover {
color: #604830; 
}

/*links to sites*/
a {font-weight: bold}
a:link{color:#885566}
a:visited{color:black}
a:hover{color:#DDBB99}
a{text-decoration: none}

/*styling libraries list*/
li:before {
content: "\f02d";
font-family: FontAwesome;
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 {
/*	font-family: 'Ubuntu', sans-sertif;*/
color:#593849;
font-weight:bold;
}

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