/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Full-width header image */
header img {
    width: 100%;
    height: auto;
    display: block;
}

/* Layout container */
.container {
    display: flex;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Sidebar (Sticky on Desktop, Below Content on Mobile) */
.sidebar {
    width: 300px; /* Fixed width */
    background-color: #f4f4f4;
    padding: 20px;
    position: sticky;
    top: 0; /* Ensures sidebar starts below header */
    left: 0;
    height: fit-content;
    align-self: flex-start;
}

/* **NEW FIX**: Ensure Sidebar is Fully Left */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

p {margin-bottom: 15px;}

/* **NEW FIX**: Force Sidebar to Stick to Left Edge */
.sidebar {
    margin: 0;
    padding-left: 0; /* Ensures no unwanted spacing */
}

/* Ensure images inside sidebar fit properly */
.sidebar img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0px auto;
    border-radius: 5px;
}

/* Book format icons container */
.book-formats {
    display: flex;
    justify-content: center; /* Centers icons horizontally */
    align-items: center; /* Aligns icons vertically */
    gap: 10px; /* Spacing between icons */
    margin-top: 10px;
}

/* Individual icon styles */
.book-formats a {
    display: inline-block;
}

.book-formats img {
    width: 100px; /* Adjust icon size as needed */
    height: auto;
    transition: transform 0.2s ease-in-out;
}

/* Hover effect for icons */
.book-formats img:hover {
    transform: scale(1.1); /* Slight zoom effect */
}

/* Main Content (Takes Remaining Space) */

h1 {
    color: #f66c09;
    font-size: 75px;
    line-height: .85;
}



main {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    font-family: "Veranda", serif; /* Change to your preferred font */
    font-size: 22px; /* Adjust font size */
    line-height: 1.6; /* Improve readability */
    color: #333; /* Set text color */
}



/* Center images inside the main content */
.ads {
    max-width: 50%; /* Prevents image from overflowing the content area */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Ensures it behaves like a block element */
    margin: 15px auto; /* Centers the image horizontally */
    border-radius: 5px; /* (Optional) Soft rounded edges */
}

.image-link {
    text-decoration: none; /* Removes underline */
    color: #FFFFFF; /* Default link color */
}

.image-link:hover {
    color: #FFFF00; /* Changes color when hovering */
}

.image-link:visited {
    color: #FFFFFF; /* Ensures the link stays the same after clicking */
}


/* Sticky Footer */
footer {
    font-size: 12px;
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: #333333;
    color: #FFFFFF;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
}

/* RESPONSIVE DESIGN: Moves Sidebar Below Content on Small Screens */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        position: relative; /* No longer sticky on small screens */
        width: 100%;
        height: auto;
        order: 2; /* Moves sidebar below content */
    }

h1 {
    color: #f66c09;
    font-size: 45px;
    line-height: .85;
}

    main {
        order: 1; /* Ensures main content appears first */
     background-color: #fff;
    font-family: "Veranda", serif; /* Change to your preferred font */
    font-size: 22px; /* Adjust font size */
    line-height: 1.6; /* Improve readability */
    color: #333; /* Set text color */
   }
}