body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #fbedd9;
    color: #000000;
}

/* Fixed header */
header {
    position: fixed; /* Keep header fixed at the top */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    background-color: #fbedd9; /* Header background color */
    text-align: center; /* Center text */
    z-index: 1000; /* Ensure it stays above other content */
}

/* Header image styling */
.header-image {
    width: 50%; /* 50% of the header */
    max-width: 1350px; /* Limit max width to maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it takes up block space */
    margin: 0 auto; /* Center the image */
padding: 10px 0; /* Vertical padding */
}

/* Fixed navigation */
nav {
    position: fixed; /* Fixed position */
    top: calc(175px); /* Adjust dynamically to header height */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    background-color: #000000; /* Navigation background color */
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center items */
    padding: 10px 0; /* Vertical padding */
    z-index: 999; /* Ensure it's above other content */
border-bottom: 10px solid #fbedd9; /* Add bottom border */
}

/* No margin and padding for nav items */
.nav-container {
    display: flex; /* Use flexbox for nav links */
}

nav a {
    color: #fff; /* Text color */
    text-decoration: none; /* Remove underline */
    padding: 10px 20px; /* Padding around links */
    transition: background-color 0.3s; /* Smooth background change */
}

nav a:hover {
    background-color: #7e7c78; /* Grey background on hover */
}

/* Main content section */
section {
    padding-top: 600px; /* Space for header and nav combined */
    background-color: #05b5cc; /* Set background color for section */
}



.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center child elements horizontally */
    justify-content: center; /* Center child elements vertically */
    width: 75%;
    margin: 0 auto; /* Horizontally center the container */
}


.contact-links {
    list-style: none;
    padding: 0;
}

.contact-links li {
    margin-bottom: 10px;
}


/* Style for the inserted image */
.inline-photo {
    max-width: 100%; /* Make sure the image doesn't exceed its container */
    height: auto; /* Maintain the aspect ratio of the image */	
    display: block; /* Remove extra space below the image */
    margin: 20px  auto; /* Add margin above and below the image for spacing */
}



/* Container for the grid */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive columns */
  gap: 16px; /* Spacing between images */
  padding: 16px; /* Add some padding to the container */
justify-content: center; /* Center items horizontally */
  justify-items: center; /* Center images horizontally */
}

/* Book covers */
.book-grid img {
  width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
  max-width: 500px; /* Prevent images from exceeding their natural size */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a slight shadow */
  border-radius: 8px; /* Optional: Add rounded corners */
  transition: transform 0.2s ease-in-out; /* Optional: Add hover effect */
}

/* Hover effect */
.book-grid img:hover {
  transform: scale(1.05); /* Slightly enlarge the image on hover */
}


/* Footer styling */
footer {
    text-align: center; /* Center footer text */
    padding: 16px; /* Padding */
    background-color: #000000; /* Footer background color */
    color: #fff; /* Footer text color */
}

.book-genre {
    flex-basis: calc(90% - 20px);
    margin: 20px 0;
}

.book-genre .content-container {
    text-align: center;
}

.book-genre img {
    width: 30%;
    max-width: 75%; /* Ensure the image doesn't exceed its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px;
    display: block;
    margin: 0 auto; /* Center the image within its container */
}

.book-genre p {
    font-size: auto;
    /* Optionally, add some padding or margin for spacing */
    padding-top: 5px;
}

	.header-image {
            width: 50%;
            max-width: 50%;
            height: auto;
            border-radius: 4px;
	    
        }
	

        h2 {
            color: #000000;
        }

        footer {
            text-align: center;
            background-color: #000000;
            color: #fff;
        }

.tabs {
    display: flex;
    background-color: #f1f1f1; /* Light gray background for tabs */
position: relative;
    top: 10px;
    width: 100%; /* Stretch the tabs across the page */
    z-index: 1000; /* Stay on top of other elements */

}

.tab-button {
    flex: 1; /* Equal width for all buttons */
    padding: 14px; /* Space inside the buttons */
    cursor: pointer; /* Pointer cursor on hover */
    background-color: inherit; /* Inherit background from tabs */
    border: none; /* No border */
    outline: none; /* No outline */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.tab-button:hover {
    background-color: #ddd; /* Darker gray on hover */
}

.tab-button.active {
    background-color: #ccc; /* Darker gray for active tab */
    font-weight: bold; /* Highlight the active tab */
}

.tab-content {
    display: none; /* Hide all content by default */
    padding: 20px; /* Space inside the content */
    border: 1px solid #ccc; /* Border around content */
    border-top: none; /* Make sure it connects directly to the tabs */ 
}

.tab-content.active {
    display: block; /* Show the active content */
}

/* Container for the table to allow scrolling on smaller screens */
.table-container {
    width: 100%; /* Make the container take up full width */
    overflow-x: auto; /* Enable horizontal scrolling if necessary */
    margin: 20px 0; /* Add spacing above and below the table */
}

/* Style the table */
.text-table {
    width: 100%; /* Ensure the table takes up full width */
    border-collapse: collapse; /* Remove space between table borders */
    text-align: left; /* Align text to the left */
    font-family: Arial, sans-serif; /* Default font for the table */
    font-size: 16px; /* Base font size for readability */
}

/* Table headers and cells */
.text-table th, 
.text-table td {
    padding: 12px 15px; /* Add padding to table cells */
    border: 1px solid #ddd; /* Light border around the cells */
}

/* Table headers styling */
.text-table th {
    background-color: #f4f4f4; /* Light gray background for headers */
    font-weight: bold; /* Bold header text */
}

/* Responsive styles for smaller screens */
@media (max-width: 600px) {
    .text-table {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    .text-table th, 
    .text-table td {
        padding: 6px; /* Reduce padding for smaller screens */
    }

    /* Stack the table headers on top of the cells for better layout */
    .text-table th {
        font-size: 12px; /* Reduce header font size */
    }

    .text-table td {
        font-size: 12px; /* Smaller font for cells */
    }
}

.amazon-buy-button {
    display: inline-block;
    background-color: #f2c75e; /* Tobin orange */
    color: #000000; /* Black text */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold text */
    padding: 12px 20px; /* Padding for button size */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-size: 16px; /* Slightly larger text */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.amazon-buy-button:hover {
    background-color: #cc8500; /* Darker orange on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.amazon-buy-button:active {
    background-color: #b37400; /* Even darker orange when clicked */
}