/*===
    328lect08-2-1-flex.css - mostly built during recording on 2025-03-18
    by: Sharon Tuttle
    last modified: 2025-03-18
===*/

/*===                                                                           
    give body a small margin                                                    
===*/

body                                                                            
{
    margin: 1em;
}

/*===                                                                           
    set footer element's font size to be tastefully small                       
===*/                                                                           
                                                                                
footer                                                                          
{
    font-size: 0.5em;
}

/*===
    try out some flexbox properties on the container with class="flex-demo"
===*/

.flex-demo
{
    display: flex;
    flex-direction: row; /* column; */
    justify-content: /* flex-end; */
	             /* center; */
		     space-between; 
		     /* space-around; */
		     /* space-evenly; */
    flex-wrap: wrap; /* default is nowrap */
    gap: 0.2em;
    
    border:  0.1em green solid;
    padding: 0.2em;
}

/*===
    using a descendant selector - the blank here means I want to
    style divs that are descendants of a container with class="flex-demo"
===*/

.flex-demo div
{
    padding:    0.3em;
    font-size:  2em;
    border:     0.1em solid blue;

    /*===
        these are properties appropriate for flex ITEMS,
        items WITHIN a container element with display: flex;
    ===*/

    flex-basis: auto; /* default; can also be a % or length unit */
    flex-grow:  0;  /* default */
    flex-shrink: 1; /* default */
}

/*===
    using flexbox to layout this small form
===*/

form
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1em;

    padding-top: 0.5em;
    margin-top: 1em;
    border: thin solid black;
    width: 25em;
    margin-left: auto;
    margin-right: auto;
}

/*===
    using flexbox with a small div with class="submit-div"
    to center the submit button that is its only content
===*/

.submit-div
{
    display: flex;
    justify-content: center;
    margin-bottom: 0.5em;
}