#div1 {
    color: blue;
    background-color: aqua;
    border: 4px solid red;
    font-size: 50px;
    padding: 10px;
    width: 50%;
}

/* 
        Notice that our div2 inherited font colour, font-size, padding, and  background-color from the parent div but didn't inherit the border.

        In CSS, some things inherit by default and some things don't.  However, we can force the issue...
        
        */

#div2 {

    border: inherit;

    /* color: initial; */
    /* font-size: initial; */

    /* Of course, we could just do this: */
    /* color: black; */



    /* So far, we have been using px as our sizing unit.  Turns out that there are more interesting ones!  Let's set our child container font using em and our width using %*/

    /* font-size: .5em; */

    /* width: 50%; */

    /*
     Let's make div1 50% width
    
     Notice that div2 is still 50% of div1?

     However, watch what happens when we change that to vw of 80
    */


    /* width: 80vw; */


}