* { box-sizing: border-box; }

body { font-family: Arial, sans-serif; 
		margin: 0; 
		padding: 0; 
		line-height: 1.6; 
		background: #7a0e0e; 
		color: #2e2c2a; 
}

header { 	background-color: #7a0e0e; 
			color: #fff; 
			margin-bottom:0px; 
			padding-top: 0.5em;
			padding-bottom: 0.5em
}

nav   { 
        text-align: center;
        font-weight: bold;
        padding: 0;
}

nav ul { list-style-type: none;
         margin: 0;
		 padding-left: 0;
		 font-size: 1.2em; 
}

nav a { color: #7a0e0e; 
		margin: 0 10px; 
		text-decoration: none; 
		font-weight: bold; 
}

nav a:hover {  font-style: italic; text-decoration: underline;}

#ctastart:hover { font-style: italic; }
#ctaexplore:hover { font-style: italic; }
#ctaauthor:hover { font-style: italic; }

main {
	max-width: 980px; 
	margin: 0 auto; 
	padding: 40px 18px; 
	line-height: 1.6;
}

.heroid {
	padding: 28px 22px; 
	border: 1px solid #e5e5e5; 
	border-radius: 14px;
}

.heroid h1 {
	margin: 0 0 10px; 
	font-size: 40px; 
	line-height: 1.15;
}

.heroid p {
	margin: 0 0 18px; 
	font-size: 18px; 
	max-width: 70ch;
}

.hero, .bio, .books, .coming-soon { padding: 20px; text-align: center; }

.hero img, .books img { max-width: 250px; border-radius: 8px; margin-top: 10px; }

.book { margin: 20px 0; 
		background: #fff5f5; 
		border-radius: 10px; padding: 15px; 
		box-shadow: 0 0 5px rgba(0,0,0,0.1); 
}

#displayArea { 
    background-color: #FFFFFF;
}
	
.navButton { width:150px; height:61px; }
.bookButton { width: 200px; height: 75px; }
.floatLeft { float: left; }
.clearleft { clear: left; }
.floatRight {padding-left:10%; padding-right:10%; float: right;}
.clearRight { clear: right; }

footer { background: #2e2c2a; 
		 color: #fff; 
		 text-align: center; 
		 padding: 20px; 
		 margin-top: 30px; 
}

.socials a { color: #fff; margin: 0 5px; text-decoration: none; font-size: 1.2rem; }
.socials a:hover { text-decoration: underline; }

.newsletter { margin-top: 15px; }
.newsletter input[type=email] { padding: 8px; border: none; border-radius: 5px; margin-right: 5px; }
.newsletter button { padding: 8px; border: none; border-radius: 5px; background: #7a0e0e; color: white; cursor: pointer; }
.newsletter button:hover { background: #5c0b0b; }

.blog { padding: 20px; max-width: 800px; margin: auto; }
.post { background: #fff5f5; padding: 15px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
.post h3 { color: #7a0e0e; }
.post p { text-align: left; }

@media (min-width: 600px) {
			nav ul { display: flex;
			         flex-direction: row;
					 flex-wrap: nowrap;
					 justify-content: space-around; } 
			nav li { border-bottom: none; }
			section { margin-left: 2em;
					  margin-right: 2em;
                      flex: 1;
			}
			.flow { display: flex;
			        flex-direction: row; }			  
}

@media (min-width: 1024px) {
			#displayArea { 
				margin: auto;
				width: 80%;
				background-color: #FFFFFF;
				border: 1px solid #002171;
				box-shadow: 5px 5px 5px #333333;
			}
			nav { text-align: left;
				  padding-left: 1em; }
			@supports (display: grid)  {
					nav ul {
						display: flex;
						flex-direction: column;
						padding-top: 1em;}
					}
					.hero  { grid-area: hero; }
					
					#displayArea { 	display: grid;
								grid-template:
							     "header  header"
								 "nav  main"
								 "footer  footer"
								 / 200px 1fr ;
					}
					header { grid-area: header; }
					nav    { 	grid-area: nav;
								text-align: center;
								padding-left: 1em;
					}
					main   { grid-area: main; }
					footer { grid-area: footer; }
			}