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

/*-----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:10px;
	}

/*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;
	background-image: url(../images/logo.png);
	width:300px;
	}

.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;
	border:solid 1px #ddbb99;
	}

.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;
	}