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

body{
    background-color: #234;
    color: #EEE;
    Font-family: verdana, arial, sans-serif;
    padding-bottom: 800px;
    border: 4px solid #222;
    margin: 4px;
    padding: 12px;
}

/* type selector */

header {
    background-color: #222;
    border: 2px solid hotpink; 
    padding: 12px;
    text-align: center;
}

/* child selector */

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

/* descendant selector */

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

}

/* class selector */

.subtitle {
    text-align: center;
   /* border: 2px solid #gray; */
    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: 360px;
    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;
        /* canter a block */
        margin: 20px auto;
        box-shadow: -4px 8px 14px white;
    }

    #art3 h2{
        font-family: "Dancing Script", cursive;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
        text-align: center;
        color: magenta;
        border: 2px solid magenta;
    }

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

    #art4 h2 {
        color: #FF3;
        /* use position absolute on the child you want to manipulate */
        position: absolute;
        bottom: 10px; left 0;
        border: 2px solid yellowgreen;
        width: 98%;
        text-align: center;
       /* padding-bottom: 10px; */
    }

    #art5 div {
        /* setting position absolute to all divs within art5 */
        position: absolute;
    }

    #art5 {
        position: relative;
    }

    #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; /* z-index layers things on top of each other, the higher number will be the one that over laps */
            }

            #art6 {
                transition: all 300ms linear;
            }

            /* pseudo element is the below ":hover" that is added to the art6 tag */
            #art6:hover {
                background-color: #404;
                color: #FF4;
                border: 2px solid yellowgreen;
            }

            #art7 h2 {
                color: lime;
                font-size: 22pt;
            }

            #art7 p{
                font-style:italic;
            }

            #art8 {
                background-image: url(/cis195/cybersecurity.jpg);
                opacity: 30%;
                  }

                  
/* CSS ruleset, AKA rule 
selector {
declarations 1;
declaration 2;
property: value;
property: value;
property : value1, value2, value3;
property: value value;
}
*/