.sub-nav {
	background-color: black;
	border-bottom: 2px solid white; 
    margin-bottom: 20px;
}

.sub-nav li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    text-align: center;
    font-weight: bold;
	background-color: black;
	color: rgba(255, 0, 0, 0.5);
	border-bottom: 2px solid white;
	height: 35px;
}

.sub-nav li:last-child a{
    border-bottom: none;
}

/* :hover pseudoklasse */
/* ID = 0 / class = 2 / tags = 1 => (0, 2, 1) */
.sub-nav li:hover a, .sub-nav li:focus a {
	background-color: rgba(255, 0, 0, 0.5);
	color: white;
}

.sub-nav .active a {
	background-color: rgba(255, 0, 0, 0.5);
	color: white;
}

@media screen and (min-width: 1024px) {

    .sub-nav {
    }

    .sub-nav ul {
        display: flex;
    }

    .sub-nav li {
        flex: 1;
    }

    .sub-nav li a {
        border-bottom: none;
        text-align: center;
		border-right: 2px solid white;
    }

    .sub-nav li:last-child a {
        border-right: none;
    }
}

@media screen and (max-width: 1024px) {
    .sub-nav li a{
        font-size: 12px;
    }
}

.books {
	width: 100%;
	height: 100%;
}

.book {
	width: 90%;
	height: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 5px;
}

.book .bookTitle {
	width: 90%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
}

.book .bookImage {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	margin-top: 5px;
}

.book .bookImage img.landscape {
	width: 250px;
	height: 400px;
}

.book .bookBlurb {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}