/*CSS Reset Rule*/
*{
    margin: 0; padding: 0;
 }
/* Type selector*/
body{
    background-color: rgb(0, 0, 57);
    color: azure;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: medium;
    padding: 8px;
    line-height: 1.5;
    border: 4px solid #864;
}

/* child selector */

header > h1{ 
    text-align: center;
    color: lavender;
    font-size: larger;
    padding: 15px;
}

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

/* class selector */
subtitle{
    text-align: center;
}

/* adjacent selector */
    header + p{
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

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

    section{
        display: flex;
        justify-content: center;
        flex-flow: row wrap;

    }

    section article{
        border: 2px solid indigo;
        min-width: 200px;
        max-width: 350;
        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: snow;
        margin: 20px auto;
        border-radius: 20px;
    }

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

    #art3 h2{
        font-family: "Dancing Script", sans-serif;
        text-align: center;
        font-size: 40px;
        color: #198;
    }

    #art4{
        /* Use position reletive on the parent */
        position: relative;
    }

    #art4 h2{
        /* Use position absolute on the child you want to manipulate. */
        position: absolute;
        bottom: 0%; left: 0%;
        text-align: center;
        width: 100%;
        border-color: fuchsia;
        padding-bottom: 10%;
    }

    #art5 {
        position: relative;
    }

    #art5 div {
        /* Setting position absolute to ALL div 5 articles. */
        position: absolute;
        width: 40%; aspect-ratio: 1/1;
        height: 50%; aspect-ratio: 1/1;
    }

    #art5 div:nth-of-type(1) {
        width: 40%; aspect-ratio: 1/1;
        background-color: red;
        height: 50%; aspect-ratio: 1/1;
    }

      #art5 div:nth-of-type(2) {
        width: 40%; aspect-ratio: 1/1;
        background-color: #44F;
        margin: 30px;
    }

    #art6 {
        transition: all 300ms linear;
    }

    #art6:hover {
        background-color: #404;
        border: 4px solid green; 
    }