/* define some global variables */
* {
    --HeaderFooterBackColor : #75c4C8;
    --HeaderFooterTextColor: #1f595c;
    --bodyColor: #b8b8ff;
}

/* basic coloring & such for header, footer, and body */
body {
    margin:0px;
    background-color: var(--bodyColor);
}

header, footer {
    text-align: center;
    background-color: var(--HeaderFooterBackColor);
    color: var(--HeaderFooterTextColor);
}

/*-----------------------------------------------------------------------------------------------*/
/* position the header, footer, and article */
header h1 {
    display: inline;    /* need this to avoid creating a "new line" effect for the <h1>, which is typically a block element.
                           Making it inline keeps it all the way at the top */
}
footer p {
    display: inline;    /* avoid "newline" effect */
}

header {
    height: 75px;
}
article {
/*    min-height: calc(100vh - 75px - 30px); */
    min-height:  calc(100vh - 105px);
}
footer {
    height: 30px;
}

/*-----------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------*/
/* make the <div> a flexbox.  Proportion the images with min & max width
/*------------------------------------------------------------------------------------------------*/
div {
    display: flex;
    flex-flow: row wrap;
}

div figure {
    margin: 10px;
    flex: 1;
}

figcaption {
    caption-side: bottom;
    text-align: center; 
}

div img{
    border: 3px solid black;
    padding: 5px;
    min-width: 300px;
    max-width: calc(100% - 2*8px);    /* 100% of the parent, which is the figure, minus both sides of border & padding */
}

/* this changes the background based on screen width */
@media only screen and (max-width: 500px) {
    body {
        background-color: white;
    }
}