.main-nav {
  display: grid;
  grid-template-columns: auto auto auto auto;
  text-align: center;
  font-size: 1.5rem;
  padding-bottom: 1rem;
}

.main-nav a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: inherit;
}

.main-nav a.active {
  scale: 1.1;
  font-weight: bold;
}

.series-heading {
  text-align: center;
}

.book-grid {
  background-color: #e2f5fc;
  padding: 1rem;
  margin: 1rem;
  border-radius: 1rem;
}

.series-description {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.book-card {
  display: flex;
  background-color: aliceblue;
}

.book-card a {
  width: 50%;
  height: auto;
  border-radius: 5px;
  margin: 1rem;
}

.book-summary {
  margin: 1rem;
}

.book-card h2 {
  text-align: center;
  font-size: 1rem;
}

.hero-divider {
  display: flex;
}

.hero-image {
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.wavebreak-hero {
  background-image: url('../assets/black_sand.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  width: 66%;
}

.wavebreak-hero a {
  display: flex;
  justify-content: center;
}

.wavebreak-hero .hero-book-cover {
  	position: relative;
  	z-index: 1;
  	width: 50%;
  	height: auto;
  	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  	background: transparent;
  	display: block;
}

.wavebreak-hero :hover {
	transform: scale(1.05);
}

.hero-text {
  	justify-content: center;
  	align-items: center;
  	padding: 2rem 1rem;
  	box-sizing: border-box;
  	text-align: center;
}

.hero-text h1 {
  	color: white;
}

.wavebreak-hero-text {
  	padding: 2rem;
  	box-sizing: border-box;
  	background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);
  	font-style: italic;
	  font-size: x-large;
    width: 34%;
}

.wavebreak * {
    background-color: #e2f5fc;
}

.book-links {
  	display: flex;
  	justify-content: space-around;
}

.book-link {
	width: 20vw;
}

.book-link img {
  	width: 300px;
  	height: 450px;
  	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.book-link p {
  	text-align: center;
  	font-size: 1.2rem;
  	margin-top: 0.5rem;
}

.book-link:hover img {
  	transform: scale(1.05);
  	transition: transform 0.3s ease;
}

.author {
	background-image: url('../assets/underwater_gradient.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 70vh;
}

.author-text {
  text-align: center;
  font-size: 1.2rem;
  padding: 2rem 4rem;
  color: white;
}

.author-img {
  width: 300px;
  height: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.newsletter {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background-image: url('../assets/lake_lagoon-edited.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.newsletter-img {
  width: 25vw;
}

.newsletter-text {
  font-weight: normal;
  font-size: 1.2rem;
  color: white;
}

.newsletter-content {
  display: block;
  max-width: 33vw;
  text-align: center;
}

input[type="email"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 60%;
  margin-right: 1rem;
}

.btn-primary {
  padding: 1em;
  margin: 1em;
}

.btn-primary:hover {
  font-size: xx-large;
}

.series-links {
  text-align: center;
  font-size: 1.2rem;
  background-image: url('../assets/paper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1rem 0;
}

.series-icons {
  display: flex;
  justify-content: space-around;
  vertical-align: top;
  gap: 2rem;
  margin-top: 1rem;
  color: white;
}

.series-icons img {
  height: 315px;
}

img.series-icon:hover {
  transform: scale(1.05);
}

.series-icons a:hover {
  transform: scale(1.05);
}

.contact-section {
  text-align: center;
  font-size: 1.2rem;
  padding: 2rem 1rem;
  background-image: url('../assets/paper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 70vh;
}

.contact-section p {
  max-width: 50vw;
  text-align: center;
}

.contact-section a {
  font-weight: bold;
}

.contact-section a:hover {
  font-size: 1.5rem;
}

.wavebreak-grid {
  background-image: url('../assets/water_light.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cinder-reign-grid {
  background-image: url('../assets/smoke.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.realm-of-the-jinn-grid {
  background-image: url('../assets/cloud.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}