:root {
	--blue:	#006bc0;
	--red: #7b0204;
	--purple: lavender;
	--cream: snow;
}
body {
	width: 100%; top:0px; left:0px;
	background-color: gainsboro;
	margin: 0;
	
}

						/*Text Styles*/

h1 {
	font-family: "cinzel decorative black", "liberation sans", sans;
	font-size: 32pt;
	text-decoration: none;
	font-weight: bold;
	color: black;
	text-shadow: -4px -4px 5px white;
	text-align: center;
}
h2 {
	font-family: "liberation sans", sans;
	font-size: 24pt;
	text-decoration: none;
	font-weight: bold;
	color: black;
	text-shadow: -1px -2px 2px white;
	text-align: left;
	margin-bottom: 0px; margin-top: 0px;
	
}
h3 {
	font-family: "liberation sans", sans;
	font-size: 16pt;
	text-decoration: none;
	font-weight: bold;
	color: white;
	text-align: center;
	bottom-margin: 0px;
}
p {	
	font-family: "liberation sans", sans;
	font-size: 12pt;
	text-decoration: none;
	color: black;
	text-align: justify;
}

.jumpto {
	background-color: black;
	color: white;
	width: 100%;
	text-align: center;
	text-decoration: none;
}
.jumpto h4 {
	margin-top: 5px;
	margin-bottom: 5px;
	text-decoration: none;
}
.jumptostripe {
	margin-top: 0px;
	width: 100%;
	background-color: black;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0px 0px 0px 0px;
}

						/*Section 1*/
.section1 img {
	width: 100%; height: auto;
	border-bottom: 3px solid var(--red);
}

						/*Section 2*/
.section2 {
	display: flex;
	position: relative;
	width: 100%; margin: auto;
	justify-content: center;
}
.section2 img {
	width: 80%; height: auto;
	border: 3px solid var(--red);
	border-radius: 20px;
}

						/*Book List*/
img {
	height: 300px; width: 196px;
}
hr {
	color:black;
	border: 2px solid black;
	width: 100%;
	margin-top: 0px;
}
.booklist {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 80%; margin: auto;
	padding: 0px 10px 10px 10px;
	margin-top: 10px;
}
.trilist, .bilist, .monlist, .shortlist, .picturelist, .edulist, .audiolist  {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 90%; margin: auto;
	background-color: white;
	gap:10px;
	padding: 10px 10px 10px 10px;
}

.card {
	position:relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	width: 100%; margin: auto;
}
.trcard, .secard {     /*This is formatting the individual card,  not the area.*/
	position:relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

.trcard {width: 250px;}
.trcard img {width: 250px; height:381px;}
.trcard p {text-align: center;}

.secard {width: 220px;}
.secard img {width: 196px; height: 300px;}
.secard p {text-align: center;}

.nacard {width: 180px;}
.nacard img {width: 180px; height: 274px;}
.nacard p {text-align: center;}

.yrcard {width: 220px;}
.yrcard img {width: 196px; height: 300px;}
.yrcard p {text-align: center;}

.path {width: 400px;}
.path img {width: 400px;}

.pbcard {width: 260px;}
.pbcard img {width: 240px; height:300px;}
.pbcard p {text-align: center;}

.nfcard {width: 260px;}
.nfcard img {width:240px; height: 300px;}
.nfcard p {text-align: center;}

.aucard {width: 270px;}
.aucard img {width: 250px; height: 250px;}
.aucard p {text-align: center;}



					/*Footer*/
footer {
	position: relative;
	display: flex;
	z-index:10;
	flex-direction: row;
	width: 100%;
	background-color: black;
	border-top: 3px solid var(--red);
	box-shadow: 0px -4px 3px darkgray;
}
nav {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-evenly;
	align-items: center;
}
nav a {
	text-decoration: none;
}
footer h4 {
	color: white;
}

@media screen and (max-width:1023px) {
.logopic {height: 40px; margin: 5px 0px 5px 5px;}
.deboktonwords {height: 15px;}
nav {justify-content: center;}
}

@media screen and (max-width:767px) {
header section {width: 80%;} nav {width: 20%;}
h2 {font-size: 18pt;}
.trcard, .secard, .nacard, .yrcard, #yrcard2, .pbcard, .nfcard, .aucard {width: 90%; height: auto;}
.trcard img, .secard img, .nacard img, .yrcard img, #yrcard2 img, .pbcard img, .nfcard img, .aucard  img {width: 90%; height: auto;}
.booklist, .novellist {width: 95%; height: auto;}
.section2 img {width: 98%; height: auto;}
}