/*===
    328lect08-1.css - built (mostly) during class on 2026-03-09
    by: Sharon Tuttle
    last modified: 2026-03-12
===*/

/*===  
    set footer element's font size to be 0.5 em (0.5 times the
    size of an uppercase M in the current font...) 
===*/

footer
{
    font-size: 0.5em;
}

/*===
    for h1 elements, 
    trying out different settings for different properties
    related to borders
===*/

h1
{
    border: .1em solid red;
    border-left: thick dotted #007a78;
    border-bottom-color: rgb(255, 200, 69);
    border-bottom-style: double;
    border-bottom-width: 0.5em;
    border-right-width: 1em;
}

/*===
    adding a tasteful, collapsed border to tables (and table data cells and
    table header cells)
===*/

table, td, th
{
    border: 0.1em solid blue;
    border-collapse: collapse;
}

/*===
    based on an in-class question,
    experimenting to see how border-collapse might affect
    different styles of borders --

    (changed this from td to th after class, because I
    wanted to see how this might be handled related to
    the table element's border, and the dotted style
    seemed a little more visible this way)    
===*/

th
{
    border-left: 0.2em dotted orange;
}

/*===
    giving many other elements a green border,
    to help see how the element's boxes differ for
    inline and block elements, and to make later 
    experiments with padding and margins more
    visible
===*/

p, caption, h2, ul, li, code, strong, ol, footer, a, hr
{
    border: 0.1em solid green;
}

/*===
    giving inline elements a, strong, and code and pink background
===*/

a, strong, code
{
    background-color: pink;
}

/*===
    giving h1 and h2 headers, table data and header cells,
    and list items a light gray background
===*/

h1, h2, td, th, li
{
    background-color: lightgray;
}

/*===
    giving paragraph and table caption elements a light green
    background
===*/

p, caption
{
    background-color: lightgreen;
}

/*===
    giving unordered and ordered lists and footers a
    yelllow background
===*/

ul, ol, footer
{
    background-color: yellow;
}

/*===
    giving list items first a padding of 1em,
    then adding a margin of 1em --
    comment out one or the other to see the
    different effect of each declaration
===*/

li
{
    padding: 1em;
    margin: 1em;
}

/*===
    giving inline element strong left and right padding
    (with different values to show we can) --
    after class, added playing around a bit with margins
===*/

strong
{
    padding-left: 4em;
    padding-right: 1em;

    /*=== 
        uncomment to see that trying to style margin-top
        has NO effect on this inline element
        (true for margin-top, margin-bottom for inline elements)
    ===*/
    
    /* margin-top: 1em; */

    /*===
        added after class: but you CAN give an inline element
        a margin-left, margin-right...
    ===*/
    
    margin-left: 1em;
}

/*===
    giving paragraphs with class="eyecatching" a distinctive background
    as well as left, right margins 
===*/

p.eyecatching
{
    margin-left: 1em;
    margin-right: 3em;
    background-color: cyan;
}

/*===
    now giving the body element a left, right margin

    (browsers vary in whether they style body elements
    with a margin, so normalize.css removes any body margin --
    by now adding it, I can assure body has this margin
    regardless of the browser executing/displaying this
    document)
===*/

body
{
    margin-left: 1em;
    margin-right: 1em;
}

/*===
    roughly-centering h1 elements, using the width property so
    it does not fill the entire width of its container, and
    then specifying same-size left and right margins
    (but different-width border parts "skew" the centering a
    bit!)

    NOTICE: using percentage for width, h1's width CHANGES when
    browser window is made narrower, wider!
===*/

h1
{
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

/*===
    centering h2 elements, using the width property so
    it does not fill the entire width of its container, and
    then specifying same-size left and right margins
    (its more-even border parts help the centering here!)

    NOTICE: using em for width means h2's width does NOT change
    when the browser window is made narrower, wider --
    but margin-left's and margin-right's auto value works for
    these to be automatically resized around the h2
===*/

h2
{
    width: 15em;
    margin-left: auto;
    margin-right: auto;
}

/*===
    styling the div with class="flex-demo" to try out
    flexbox layout and some of its associated properties
===*/

.flex-demo
{
    display: flex;
    
    border: .1em green solid;
    padding: .2em;
    margin: 1em;
    
    flex-direction: /*column;*/
 	            row;
    
    gap: .2em;
    
    justify-content: /*center;*/
   	             /*space-between;*/
	             space-around;
}