body {
    background: url("../assets/images/nasa_jwst_bg.jpg"), black;
    background-size: 100%;
    /* color: aliceblue;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    stroke-width: 2%;
    -webkit-text-stroke-width: 0.2em;
    -webkit-text-stroke-color: black;
    paint-order: stroke fill; */
}

a {
    /* color: aqua; */
}

#main-window {
    margin: 3em;
}

/* All code below this comment were added by Audrey (that's me!), so I'll try and make it clear what does what! */
/* The container is what wraps your entire page, any divs will fit within this space */
#container {
    max-width: 80em; /* Your max width here will dictate how large you allow the page to get, this eliminates
    the inline styling used in index.html */
}

/* 
Where most of the magic happens: Responsive web design

What the @media line specifies is the conditions that must be true for the following lines of code (think of it like an if statement!)
only: This is mainly just an "old browser" check, where browsers that can't do media query will automatically fail the condition
    and the block of code won't execute. Modern browsers like Firefox and Chromium will pass this, though.
screen: This specifies that the page must be displayed on a screen, like a computer monitor, phone, tablet, etc.
max-width: 80em: This specifies that the max width of the viewport cannot exceed 80em, or the max-width of the page to begin with
    As far as I know, if you're using em as your unit, this has to be the same as the max-width of your entire page in #container,
    but for px, it has to be -100px from the max-width set in #container
*/
@media only screen and (max-width: 80em) {
    /* This is what makes the page able to scale according to changing viewport sizes */
    #flex {
        display: flex; /* This specifies that the page behaves as a flexible box, or flexbox, where items inside the
        flexbox can shrink or grow to occupy more space whenever the screen size is changed. Flexboxes use only one dimension,
        either organizing items in a column or row. For your page, I believe it's column, though I could be wrong. */
        flex-wrap: wrap; /* By setting the flex-wrap property to "wrap", this makes it so items that exceed the flexbox simply
        wrap back around, so there's no text shooting off to the side. */
    }
    /* 
    ORDER SECTION
    
    This for now doesn't matter much since you only have one section to this page, but when you add more sections like asides 
    or navs, this will become important! 
    
    What order does is it specifies the order in which elements are stacked on something like mobile, with 1 getting top
    priority and anything lower getting lower priority

    It won't really make sense unless you add more elements that need to be loaded in a certain way, but this is how you tell
    browsers how to load things in what order you want!
    */
    main {
        order: 1;
    }
}