#div1 {
    color: blue;
    background-color: aqua;
    border: 4px solid red;
    font-size: 70px;
    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 {
    /*inherit forces the element to take the property from it's parent regardless of default behaviour*/
    border: inherit;
    /*initial forces the element to not take the property from it's parent regardless of default behaviour*/
    /* 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 %*/

    /*em is a relative size for our spacing/sizes instead of absolute for px*/
    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
    */

    /*80vw = width becomes 80% of the size of the viewport (always relative)*/
    /* width: 80vw; */
    /*50vh = height becomes 50% of the size of the viewport (always relative)*/
    /* height: 50vh; */

}