body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 2rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.logo {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 150px;
    height: auto;
    z-index: 1000;
}

/* Content wrapper centers content and keeps 4:3 ratio */
.content-wrapper {
    margin: auto;           /* centers horizontally and vertically */
    width: 80vw;            /* max width relative to viewport width */
    max-width: 960px;       /* max width at 4:3 ratio (e.g., 960x720) */
    aspect-ratio: 4 / 3;
    background-color: white;
    padding: 2rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow-y: auto;
    box-sizing: border-box;
}

/* Article text styling */
.blog-post {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
}

/* Footer centered */
footer {
    text-align: center;
    margin-top: auto;
    padding: 1rem 0;
    background-color: #f4f4f4; /* optional background for footer */
}

.footer-image {
    max-width: 200px; /* or whatever width fits nicely */
    height: auto;
    display: inline-block;
}