body {
    /* Combined styles from both previous definitions: */
    font-family: monospace;
    color: white;
    font-weight: 300;
    font-size: 15px;
    min-height: 100vh; /* Ensures body has height */
    
    /* Background Image settings: */
    background-image: url("https://warpunderweather.neocities.org/window.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto; 
    background-attachment: fixed;
}

.header-graphic {
    display: block;      /* Makes the image a block element so margins can center it */
    margin: 20px auto 10px; /* Centers the image horizontally, adds space above and below */
    max-width: 235px;    /* Controls the size of your graphic */
    height: auto;        /* Ensures the image doesn't get distorted */
}

.container {
    max-width: 50%; /* This is the key line: Limits the content to half the screen width */
    margin-left: 0; /* Ensures the container sits flush against the left edge */
    margin-right: auto; /* Keeps it aligned to the left even if the window resizes */
    padding: 20px;
}


.header-graphic {
    display: block;      /* Makes the image a block element so margins can center it */
    margin: 20px auto 10px; /* Centers the image horizontally, adds space above and below */
    max-width: 235px;    /* Controls the size of your graphic */
    height: auto;        /* Ensures the image doesn't get distorted */
}


.content {
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}