/* 
Documentation here would imply I understand my own creation. 



I don't
*/

#header {
	background-color: #333;
	overflow: hidden;
	margin-top: -10px;
	font-size: 1.5em;
	text-decoration: none;
	width: 100%;
	padding-top: 15px;
}

html {
	margin: 0px;
	padding: 0px;
}

body {
  background-color: #3d5b69; /* Was #0d3244cc but that does not work in Microsoft Edge */
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
}

#content {
	width: 80%;
	height: 80%;
	margin: auto;
	background-color: #e3e6e7; /* Was #f5f5f5e6 but that does not work in Microsoft Edge. Good job Microsoft Edge. How do you not understand a hex code? */
	margin-top: 50px;
}

#content h1 {
padding: 10px;
text-align: center;
}

#content p {
	text-align: center;
	font-size: 1.4em;
	padding: 10px;
}
#content button {
margin-left: 25px;
margin-bottom: 25px;
background-color: #333; 
border-color: #333; 
color: #f2f2f2;
}

#content button:hover {
background-color: #444444;
}

#pages {
text-align: center; }

#pages button {
margin: auto;
display: inline-block;
background-color: #333; 
border-color: #333; 
color: #f2f2f2;
margin-top: 10px;
}

#header img {
	float: right;
	margin: auto;
	margin-right: 50px;
	margin-top: 25px;
	margin-bottom: -20px;
}

#header p {
	color: white;
	word-spacing: 0px;
	font-size: 1.7rem;
	margin-left: 0.4%;
	margin-right: 1.4%;
}

#noscript noscript {
	color: white;
	padding-left: 18px;
	padding-bottom: 15px;
	padding-top: 10px;
	margin-left: -10px;
	margin-bottom: 25px;
}

#noscript {
padding-top: 20px;
padding-bottom: 35px;
}

#quote p {
	margin-bottom: 25px;
}

/* People reading the source code will notice this is taken directly from W3Schools. Thanks, W3Schools. */
* {box-sizing: border-box}

.navbar {
  width: 100%;
  background-color: #333;
  overflow: auto;
}

.navbar a {
	float: left;
	padding: 12px;
	color: white;
	text-decoration: none;
	font-size: 17px;
	width: 25%;
	text-align: center;
	border-width: 6px 0px 6px 0px;
	border-color: transparent;
	border-style: inset none inset none;
}

.navbar a.active {
  background-color: #4CAF50;
}

.navbar a:hover {
  background-color: #444444;
}

.navbar a:hover.current {
  background-color: #444444;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Add a colour to the active/current link */
.navbar a.current {
	color: white;
	background-color: #333;
	border-style: inset none inset none;
	border-width: 6px 0px 6px 0px;
	border-color: #8b0000;
	text-decoration: none;
	border-top-color: transparent;
}

#quote p {
	padding-left: 15px;
	margin-top: 10px;
	}
	
#homecontent {
	padding: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.5em;
	width: 80%;
	height: 80%;
	margin: auto;
	background-color: #e3e6e7; /* Was #f5f5f5e6 but that does not work in Microsoft Edge */	
	margin-top: 50px;
}

#bookone {
	width: 550px;
	margin: auto;
	margin-left: 35%;
	background-color: #e3e6e7; /* Was #f5f5f5e6 but that does not work in Microsoft Edge */
	margin: auto;
	margin-top: 2%;
}

#bookinfo {
	text-align: left;
	padding-bottom: 25px;
	font-size: 1.3em;
	margin-left: -18px;
}


#bookone img {
	margin: auto;
	margin-top: 25px;
	background-color: #e3e6e7; /* Was #f5f5f5e6 but that does not work in Microsoft Edge */
	margin-left: 22%;
}
	/* Conditional CSS */

@media screen and (max-width: 800px) {
  #quote p {
font-size: 1em;
  }

#cover {
	width: 20%;
	
  }
  
  #bookone {
	width: 250px;
	margin: auto;
	margin-left: 35%;
	background-color: #e3e6e7; /* Was #f5f5f5e6 but that does not work in Microsoft Edge */
	margin: auto;
	margin-top: 5%;
}

#bookone img {
	margin: auto;
	margin-top: 25px;
	background-color: #e3e6e7; /* Was #f5f5f5e6 but that does not work in Microsoft Edge */
	margin-left: 25px;
	width: 200px;
	height: 250px;
}

@media only screen and (max-width: 700px) {
    #quote {
        display: none;
    }
}

@media only screen and (max-width: 700px) {
.navbar {
	width: 100%;
	background-color: #333;
	overflow: auto;
	padding: 10px;
	padding-bottom: 16px;
}

@media only screen and (max-width: 700px) {
.navbar a {
	font-size: 0.9em;
	float: none;
	display: initial;
	text-align: left;
	margin-left: 1.2em;
}

@media only screen and (max-width: 700px) {
* {
	box-sizing: initial;
}


@media only screen and (max-width: 700px) {
#homecontent {
	padding: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.3em;
	width: 80%;
	height: 80%;
	margin: auto;
	background-color: #e3e6e7;
	margin-top: 30px;
}

@media only screen and (max-width: 500px) {
.navbar a {
	font-size: 1em;
	float: none;
	display: initial;
	text-align: center;
	padding: 0.1em;
	margin-left: 0.3em;
	padding-bottom: 0.2em;
}

/* Do people even use 400px screens anymore? I don't know, but this is the barest minimum I can get a browser window to shrink to, so it might have a use case. */
@media only screen and (max-width: 400px) {
.navbar a {
	font-size: 1em;
}

@media only screen and (max-width: 400px) {
* {
	box-sizing: inherit;
}


@media only screen and (max-width: 370px) {
.navbar a {
	font-size: 0.9em;
	float: none;
	display: initial;
	text-align: center;
	padding: 0.1em;
	margin-left: 0px;
	padding-bottom: 0.2em;
}

@media only screen and (max-width: 236px) {
	.navbar a {
	font-size: inherit;
}
	
#homecontent {
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.2em;
	width: 80%;
	height: 80%;
	margin: auto;
	background-color: #e3e6e7;
	margin-top: 30px;
}

#header {
	font-size: 1.1em;
}