/* Overall Page Setup */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    margin: 0;
}

/* Constrains the width and centers the content on the screen */
.main-container {
    max-width: 1000px;
    margin: 0 auto;
}

header {
    text-align: center;
    margin-bottom: 50px;
}

/* Center the main container and restrict its width */
.container {
    max-width: 800px; /* Adjust this value (e.g., 700px or 900px) to your preference */
    margin: 0 auto;  /* Centers the container on the page */
    padding: 20px;   /* Adds breathing room on the sides for mobile */
}

/* Ensure the story content uses a comfortable reading width */
.story-content {
    line-height: 1.6; /* Improves readability */
    margin-top: 30px;
}

/* Keep the sidebar and text flowing correctly within the narrower width */
.story-block {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.text-body {
    flex: 1;
}
.main-container {
    max-width: 900px;  /* Limits the horizontal width */
    margin: 0 auto;    /* Centers the entire story on the screen */
    padding: 0 20px;   /* Prevents text from touching screen edges */
}
/* The Magic Fix: Side-by-side vertical centering */
.story-block {
    display: flex;
    align-items: center; /* Vertically centers image and text */
    gap: 40px;           /* Space between image and text */
    margin-bottom: 10px; /* Space between story sections */
}

.image-sidebar {
    flex: 0 0 250px;    /* Keeps image width consistent */
    text-align: center;
    font-style: italic;
}

.image-sidebar img {
    width: 100%;
    height: auto;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* Adds a subtle shadow */
}

.text-body {
    flex: 1;
}

/* Mobile Responsive: Stacks them when the screen is narrow */
@media (max-width: 768px) {
    .story-block {
        flex-direction: column;
        text-align: center;
    }
}