/* css reset rule */
* {
    margin: 0; padding: 0;
}


/* type selector */

body {
    background-color: rgb(68, 64, 34); color: #EEE;
    font-family: verdana, arial, sans-serif;
    padding: 12px;
    border: 4px solid #222;
    margin: 4px;
    padding: 12px;
    }

    header {
        border: 2px solid hotpink;
        padding: 12px;
    }

    /*  Child Selector  */

    header > h1  {
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        color: yellowgreen;
        padding-bottom: 20px;
        margin-bottom: 20px; 
        border-bottom: 2px solid hotpink;
    }

    /* descendent selector */

    header span {
        display: block;
        border: 0px;
        color: #FF4;
        }

    /* class selector */

    .subtitle {
        text-align: center;
        /* border: 0px solid #222; */
        padding: 10px;
        line-height: 1.5;
        text-transform: lowercase;
        letter-spacing: 8px;
    }

    /* adjacent selector */

    header + p {
        display: none;
    }

    /* ============================ */
    /* CSS Examples */

    section {
        display: flex;
        justify-content: center;
        flex-flow: row wrap;
        margin-bottom: 800px;
        }
    
        section article {
            border: 2px solid hotpink;
            max-width: 365px;
            min-height: 200px;
            margin: 10px;
            flex: 0 0 auto;
            padding: 4px;
        }

        article h2 {
            font-size: 16pt;
        }

        article p {
            margin: 8px;
            line-height: 1.4;
        }


        /* ID Selector */
    #art1 div {
        width: 70%;
        aspect-ratio: 2/1;
        background-color: skyblue;
        margin: 20px auto;
        border-radius: 20px;
        }

    #art2 div {
        width: 70%;
        aspect-ratio: 2.5/1;
        background-color: #000;
        margin: 20px auto; /* center a block */
        border-radius: 20px;
        box-shadow: -4px 8px 14px white;
        } 

    #art3 h2 {
        font-family: "Caveat", cursive;
        text-align: center;
        font-size: 30pt;
        color: rgb(208, 58, 8);
        border: 2px solid rgb(150, 212, 25);
        }

    #art3{
        font-family: "Caveat", cursive;
        text-align: center;
        font-size: 18pt;
        text-transform: capitalize;
    }

    #art4 {
       /* use poistion relative on the parent */
       position: relative;
       }

    #art4 h2 {
        color: rgb(184, 51, 255);
        /* use position absolute on the child you want to manipulate */
        position: absolute;
        bottom: 10px; left: -2px;
        border: 2px solid yellowgreen;
        width: 100%;
        text-align: center;
        /* padding-bottom: 10px; */ 
        }

    #art5 {
        position: relative;
        }
    
    #art5 div {
        /* setting position aboslute to ALL divs within art5 */
       position: absolute; 
    }

    #art5 div:nth-of-type(1) {
        width: 40%; aspect-ratio: 1;
        background-color: #F44;
        bottom: 10px; left: 64px;
        z-index: 10;
    }

    #art5 div:nth-of-type(2) {
        width: 40%; aspect-ratio: 1;
        background-color: #44F;
        bottom: -10px; right: 64px;
        z-index: 5;
    }

    #art6 {
        transition: all 300ms linear;
    }

    /* pseudo-element */
    #art6:hover {
        background-color: #404;
        color: #FF4;
        border: 2px solid yellowgreen;
    }







    

    /* css ruleset, aka rule
    selector {
        declaration1;
        declaration2;
        property: value;
        property: value;
        property: value1, value2, value3;
        property: value value;
    }
        */