@media (max-width: 400px) {
  /* CSS that should be displayed if width is equal to or less than 400px goes here */
	body {
		font-family: "Bahnschrift";
		font-size: 20px;
		background: #008475 url("../images/background-fade.jpg") repeat-x top fixed;
		color: #FFFFFF;
		margin-left: 10;
		margin-right: 10;
		padding: 0;
	}
	h1{
		font-family: "Bahnschrift";
		font-stretch: condensed;
		font-weight: 350;
		font-size: 32px;
		color: #FFFFFF;	
	}
	h2{
		font-family: "Bahnschrift";
		font-stretch: condensed;
		font-weight: 350;
		font-size: 26px;
		color: #FFFFFF;	
		margin: 0;
		padding: 0;
	}
	.booksDiv {
	  width:400px;
	  align:center;  
	}
	.viewport-booklist {
	  width: 88vw;     /* The image will always occupy exactly 88% of the screen's width */
	  height: auto;    /* Keeps the image from stretching out of proportion */
	}
	.viewport-bookdetails {
	  width: 50vw;     /* The image will always occupy exactly 50% of the screen's width */
	  height: auto;    /* Keeps the image from stretching out of proportion */
	}

}
@media (min-width: 401px) {
  /* CSS that should be displayed if width is greater than or equal to 401px goes here */
	body {
		font-family: "Bahnschrift";
		font-size: 20px;
		background: #008475 url("../images/background-fade.jpg") repeat-x top fixed;
		color: #FFFFFF;
		margin-left: 40px;
		margin-right: 40px;
		padding: 0;
	}
	h1{
		font-family: "Bahnschrift";
		font-stretch: condensed;
		font-weight: 350;
		font-size: 60px;
		color: #FFFFFF;	
		margin-left: 200px;
		margin-right: 200px;
	}
	h2{
		font-family: "Bahnschrift";
		font-stretch: condensed;
		font-weight: 350;
		font-size: 32px;
		color: #FFFFFF;	
		margin: 0;
		padding: 0;
	}
	.booksDiv {
		height: auto;
		display: flex;  
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.booksdetDiv {
		height: auto;
		display: flex;  
	}
	.viewport-booklist {
	  width: 28vw;     /* The image will always occupy exactly 28% of the screen's width */
	  height: auto;    /* Keeps the image from stretching out of proportion */
	}
	.viewport-bookdetails {
	  width: 20vw;     /* The image will always occupy exactly 20% of the screen's width */
	  height: auto;    /* Keeps the image from stretching out of proportion */
	}

}


a{
	color: #5ABECC;
	text-decoration: none;
}
a:hover{
	color: #5ABECC;
	text-decoration: underline;
}