/* FONTS */

@font-face {
	font-family: Montriva;
	src: url('Montriva.ttf');
}

@font-face {
	font-family: Porcile;
	src: url('Porcile.ttf');
}

@font-face {
	font-family: HelveticaNeue;
	src: url('HelveticaNeue.ttf');
}

@font-face {
	font-family: HelveticaNeueBold;
	src: url('HelveticaNeueBold.ttf');
}

@font-face {
	font-family: HelveticaNeueItalic;
	src: url('HelveticaNeueItalic.ttf');
}

@font-face {
	font-family: HelveticaNeueCondensedBold;
	src: url('HelveticaNeueCondensedBold.ttf');
}





strong {
	font-family: HelveticaNeueBold;
}

em {
	font-family: HelveticaNeueItalic;
}

p {
	font-family: HelveticaNeue;
}

h1 {
	font-size: 1.5rem;
	font-family: Montriva;
	font-color: #333;
	padding: 0px;
}

h2 {
	font-size: 1.3rem;
	font-family: Montriva;
	font-color: #333;
	padding: 5px;
}

h3 {
	font-size: 1rem;
	font-family: HelveticaNeueCondensedBold;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	font-color: #333;
	text-decoration: underline;
}




/* BOOKSHELF */

body {
	background-color: #ffffff;
	opacity: 1;
	background-image:  linear-gradient(#333 1px, transparent 1px), linear-gradient(to right, #333 1px, #ffffff 1px);
	background-size: 20px 20px;
}

.home-button {
	position: relative;   /* Keeps the button locked in the viewport */
        top: 20px;         /* Distance from the top of the screen */
        left: 20px;        /* Distance from the left of the screen */
        padding: 10px 20px;
        background-color: #333;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-family: HelveticaNeue;
        z-index: 1000;     /* Ensures it stays on top of other content */
}

.home-button:hover {
        background-color: #d3e2f4;
	color: #333;
}

.horizontal-line {
	width: 100%;
	border-bottom: 2px dashed #333;
	margin: 5px 0px;
	
}

.page {
    	width: 1000px;
	margin: 50px auto;
	height: 100%;
	background: white;
	border: 4px solid #333;
}

.book-grid {
	display: grid;
	grid-template-columns: 700px 287px;
	
	width: auto;
	height: auto;
	gap: 5px;
	grid-template-areas:
		"header header"
		"nav current"
		"faves current"
}

.header {
	grid-area: header;
	padding: 10px 10px 0px 10px;
}

.nav {
	grid-area: nav;
	padding: 0px 10px;
	
}

.nav ul {
	display: flex;
	padding: 10px;
	flex-wrap: wrap;
	justify-content: start;
	gap: 10px;
	text-decoration: none;
	list-style: none;
	text-align: center;
	border: 2px dashed #333;
}

.current {
	grid-area: current;
	border: 2px solid #333;
	text-align: center;
	padding: 0px 5px;
}

.current-scroll {
	overflow: scroll; 
	height: 1100px; 
	overflow-x: hidden;
}

.faves {
	grid-area: faves;
	padding: 10px;
	justify-items: start;
	align-items: start;
}

.shelf-scroll {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-end;

	overflow: scroll; 
	height: 1000px; 
	overflow-x: hidden;
}

.book {
	border: 2px solid #333;
	margin: 20px;
}

.footer {
	grid-area: footer;
	text-align: center;
	padding: 0px 20px;
	background-color: #d3e2f4;
	margin: 10px 40px;
	border-radius: 12px;
}