@charset "UTF-8";

html {
	  scroll-behavior: smooth;
	}
body {
	margin: 0;
	background: url(img/pine.png) center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover; 
  	background-color: grey;

	}



/* START NAVIGATION */

	#navigate{
	    position: fixed;
	    top: 25px;
	    left: 10%;
/* 	    background-color: rgba(167, 72, 255,.6); */
	}
	
	#navigate ul {
		
	    list-style-type: none;
	    margin:0;		    
		}

	li a {
	    display: block;
	    font-size: 1.2em;
	    margin-left: -40px;
	    color:rgb(0,0,0);
	    background-color: rgba(255,255,255,.8);
	    padding: 12px;
	    text-decoration: none;
	    text-align: center;
	    height: 18px;
	    width:120px;
		}

		li span {

		    font-size: .7em;

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


	li a:hover:not(.active) {
	    color: white;
	    background-color: rgb(50 50 50);
	  }
/* END NAVIGATION */
	
	
					
	<!-- LINK TO THE HOLDEN EXPERIMENT HOMEPAGE -->
	.he-link {
		margin-bottom: 20px;
	}	
	
	.he-link p {
		text-align: center;
	}		
						
					

/* START BOOK CONTAINER*/
	.bookContainer{
		width: 400px;
		margin: 20px 0 0 35%;
	}


		#title{
			background-color: rgba(255, 255, 255,.9);
			border:2px solid rgba(50, 50, 50, .5);
			border-radius: 3px;
			padding-bottom:.2px;
			margin:	0 auto 24px;
			text-align: center;
			}
			
			#title h1{
				color:rgba(20, 20, 20, .7);
				padding-top: 15px;
				font-size: 2.7em;
				margin: 0 0 -24px;
			}
			
			#title h2{
				color:rgba(20, 20, 20, .7);
				font-size: 1.1em;
				margin-bottom: -10px;
			}
			
			#title h3{
				font-size: 1.1em;
			}
					
			.apr39{
				margin:	auto;
				display: flex;
				flex-direction: column;
				align-content: center;
				}

				.apr39Img{
					margin: -18px auto 0;
					width: 280px;
					}				


		/* BEGIN BACKGROUND COLOR NAVIGATION */
		
		/* #top {
			margin-top: -10px;
		} */
		
		#home {			
			background-color: rgba(200, 200, 200, .2);
			padding-top:12px;
			padding-bottom:.5px;
			margin-top: 8px;
			border: 1px solid red;
				}
			.home a
				{
				background-color: rgba(255, 255, 255,.6);
				border:1px solid rgb(50 50 50);
				margin-bottom: 3px;				
				}
				
		#forward {			
			border-top: 10px solid rgba(255,0,0, .5);
			background-color: rgba(255,0,0, .1);
			padding-top:12px; padding-bottom:.5px; margin-top: 8px;
				}
			.forward a
				{
				padding:4px 12px 12px; margin-top: 15px;
				border-top: 4px solid rgba(255,0,0,.5);	
				background-color: rgba(255,0,0, .1);		
				}
				
		#preface {
			border-top: 10px solid rgba(227,66,52, .5);
			background-color: rgba(227,66,52, .1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
				}
			.preface a
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(227,66,52,.5);
				background-color: rgba(227,66,52, .1);							
				}
				
		#religion{
			border-top: 10px solid rgba(255,165,0,.5);
			background-color: rgba(255,165,0, .1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
				}
			.religion a
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(255,165,0, .5);
				background-color: rgba(255,165,0, .1);			
				}
		#love{
			border-top: 10px solid rgba(255,191,0, .5);
			background-color: rgba(255,191,0, .1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
				}
			.love a 
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(255,191,0, .5);
				background-color: rgba(255,191,0, .1);			
				}
				
		#marriage{
			border-top: 10px solid rgba(255,255,0,.5);
			background-color: rgba(255,255,0,.1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
			}
			.marriage a 
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(255,255,0,.5);
				background-color: rgba(255,255,0,.1);						
				}
				
		#someHumans{
			border-top: 10px solid rgba(223,255,0,.5);	
			background-color: rgba(223,255,0,.1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
			}
			.someHumans a 
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(223,255,0,.5);	
				background-color: rgba(223,255,0,.1);	
				}
				
		#children{
			border-top: 10px solid rgba(0,255,0,.5);	
			background-color: rgba(0,255,0,.1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
			}
			.children a 
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(0,255,0,.5);	
				background-color: rgba(0,255,0,.1);	
				}
				
		#creative{
			border-top: 10px solid rgba(0,128,128,.5);
			background-color: rgba(0,128,128,.1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
			}
			.creative a
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(0,128,128,.5);
				background-color: rgba(0,128,128,.1);		
				}
				
		#facts{
			border-top: 10px solid rgba(0,0,255,.5);		
			background-color: rgba(0,0,255,.1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
			}
			.facts a 
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(0,0,255,.5);		
				background-color: rgba(0,0,255,.1);
				}
				
		#frontiers{
			border-top: 10px solid rgba(159,0,197,.5);			
			background-color: rgba(159,0,197,.1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
			}
			.frontiers a
				{
				padding:4px 12px 12px;margin-top: 5px;
				border-top: 4px solid rgba(159,0,197,.5);			
				background-color: rgba(159,0,197,.1);
				}
				
		#conclusion{
			border-top: 10px solid rgba(127,0,255, .5);			
			background-color: rgba(127,0,255,.1);
			padding-top:12px; padding-bottom:.5px; margin-top: 50px;
			}
			.conclusion a
				{
				padding:4px 12px 12px; margin-top: 5px;
				border-top: 4px solid rgba(127,0,255, .5);					
				background-color: rgba(127,0,255, .1);
				}
				
		#about{

			border-top: 10px solid rgba(202,31,123, .6);
			background-color: rgba(202,31,123, .1);
			padding-top:12px; padding-bottom:5px; margin-top: 50px;
			}
			.about a
				{
				padding:12px 12px 16px; 
				border: 1px solid rgba(202,31,123, .5);
				border-top: 4px solid rgba(202,31,123, .5);
				background-color: rgba(255, 255, 255,.8);
				margin-top: 8px;
			}
		/* END BACKGROUND COLOR NAVIGATION */


		/* 	BEGIN BOOK PAGES */
			.page {
				position: relative;
				background-color: white;
				box-shadow: 3px 5px 20px 4px rgba(50, 50, 50, .8);
				width: 360px;
				height: 400px;
				padding: 20px 0;
				margin:	3px auto 20px;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-around;
				z-index: 1;
				}




				.page hr {
					margin-top: 18px;
					width: 90%;
					height: 0px;
				}

				.pageHeader h4{
					position: absolute;
					font-family: "Times New Roman", Times, serif;
					color:rgba(50, 50, 50, .8);
					font-size: 1.1em;
					margin: -10px 0 0 16px;
					
				}

				.page span {
					margin-left:94px;
					font-size: .9em;
				}


				.page h2 {
					width:360px;
					margin:-30px 0 0 -20px;
					text-align: center;

					color:rgb(50,50,50);
				}

				.page h3 {
					margin:-3px 0 6px -5px;
					text-align: center;
					color:rgb(50,50,50);
				}


				.page p{
					width: 60%;
					/*border:1px solid black;*/
					font-family: "Times New Roman", Times, serif;
					font-size:16px;
					margin: -30px 0 0 10px;
					}
					.page p.editNote{
						font-size:13px;
						margin: 20px 0 0 -40px;
						font-style: italic;
					}
					
					p.veryVeryWidePage {
						width: 95%;
						line-height: 12.5pt;
						font-size: .96em;
						}

					p.veryWidePage {
						width: 80%;
						}
						
					p.veryWidePage2 {
						width: 90%;
						}
	
	
					p.widePage {
						width: 70%;
						}
	
					p.narrowPage {
						width: 45%;
						}

				span.citedFrom {
					margin-left: 100px;
				}

				span.indent {
					margin-left: 28px;
					font-size: 1em;
				}
				



			.longPage {

				position: relative;
				box-shadow: 4px 4px 20px 2px rgba(100, 100, 100, .3);
				width: 360px;
				height: 440px;
				padding: 0;
				margin:	10px 2% 40px;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-around;
				z-index: 1;
				}

			.longPage p{
				width: 55%;
				font-family: "Times New Roman", Times, serif;
				font-size:16px;
				line-height: 1em;
				margin: 40px 0 0 20px;
				}


				.pageNumber 
					{
					position: absolute;
					width: 90%;
					bottom: 8px;
					margin:0 auto;
/* 					border:1px solid red; */
					}
					
				.pageNumber hr
					{
					margin: 0px 0 2px 0;
					width: 100%;
					height: 0px;
					}

				.pageNumber p{
					font-family: Arial, Helvetica, sans-serif;
					font-size:13px;
					margin:0;
					}
					
				.pageNumber span{
					position: absolute;
					text-align: right;
					width: 184px;
					font-family: Arial, Helvetica, sans-serif;
					font-size:13px;
					}
		/* 	END BOOK PAGES */
				
						
		/* 	BEGIN ABOUT ANNE PAGE */		
			.pageAboutAnne  {
				position: relative;
				background-color: white;
				box-shadow: 3px 5px 20px 4px rgba(50, 50, 50, .8);
				width: 360px;
				height: 800px;
				padding: 20px 0;
				margin:	3px auto 20px;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-around;
				z-index: 1;
				}
				
				.aboutAnne ul {
					list-style-type: disc;	
					box-shadow: none;
					padding-right: 17px;
					margin-top: -5px;
					margin-left: -12px;
					}
					
				.aboutAnne li {
					font-size: .9em;
					line-height: 1.5em;
					}


				.aboutAnne li a {
					text-decoration: underline;
					display: inline;
					padding: 0;
					font-size: 1em;
					margin-left: 0;
					color: rgb(0,0,255);
					text-align: center;

					}
	
					.aboutAnne li a.active {
					    color: white;
					}
				
				
					.aboutAnne li a:hover:not(.active) {
					    color: white;
					  }
		  
		  
					.anneByron{
						margin:	auto;
						display: flex;
						flex-direction: column;
						align-content: center;
						}

						.anneByImg{
							margin: -20px auto 0;
							width: 350px;
							}
		/* 	END ABOUT ANNE PAGE */ 
		 
/* END BOOK CONTAINER */

	.back-to-top {
		margin: 20px auto;
		padding: 1px;
		background-color: none;
		width:400px;
		text-align: center;
	}
	
		.back-to-top p {
			text-align: center;
		}



	footer {
		margin: 20px auto;
		padding: 1px;
		background-color: rgba(255, 255, 255,.6);
		width:430px;
	}




/*MEDIA QUERY*/
@media only screen and (max-width : 800px) {

	body {
		width: 600px;
		}
		
		#navigate{
		    left: 2%;
		}

	.bookContainer{
		width: 400px;
		margin-left:30%;
	}

		section {
			height:1070px;
			margin-top: 110px;
			}
			
			


	#menu-icon {
		display:inline-block;
	}
	
	.pageAboutAnne  {
		height: 750px;
		}
		
		.anneByImg{
			margin: -8px auto 0;
				}

}


/*MEDIA QUERY*/
@media only screen and (max-width : 610px) {

	body {
		width: 460px;

		}
		

	/* START NAVIGATION */

	#navigate{
	    position: fixed;
	    top: 25px;
	    left: 1000px;
/* 	    background-color: rgba(167, 72, 255,.6); */
	}
	
	#navigate ul {
		
	    list-style-type: none;
	    margin:0;		    
		}

	li a {
	    display: block;
	    font-size: 1.2em;
	    margin-left: -40px;
	    color:rgb(0,0,0);
	    background-color: rgba(255,255,255,.8);
	    padding: 12px;
	    text-decoration: none;
	    text-align: center;
	    height: 18px;
	    width:120px;
		}

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


	li a:hover:not(.active) {
	    color: white;
	    background-color: rgb(50 50 50);
	  }	
	  
	  
	  .bookContainer{
		width: 407px;
		margin:1%;
	}	
			
	}