/* reset rule for my styles
    set all elements to a base of zero
        for margin and padding */

        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }

        body{
            /* position:absolute; top:50px; left:50%; */
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background-color: sandybrown;
            

        }

        #container{
            background-color: rgba(255,255,255,.7);
            width: 70%;
            min-height: 800px;
            margin: 0px auto; /*centering for a block element */


        }

        h1{
            background-color: rgba(255,255,255,.7);
            padding:1em 2em;
            text-align: center;

        }

        h1 span{
            color: transparent;
            text-shadow: 0px 0px 3px #222;
        }

        nav{
            border: 2px solid red;
            
        }

        nav ul{
            border: 2px solid blue;
            list-style: none;
            text-align: center;
            /* display:flex; justify-content:center;  for pages to adapt to a phone size*/
        }

        nav > ul > li{
            border:2px solid green;
            display: inline-block;
            height: 60px;
            margin: 8px;
            position: relative; /* allows you to nudge the element */
            /* also allows you to position absolute a child */
        }

        ul.submenu{
            position: absolute; /* position absolute within a relatively positioned parent */
            top: 55px;
            left:0px;
            border: 4px solid black;
            display: none; /* visibility:hidden; hide the element, but keep the space */

        }

        

        nav > ul > li a{
            font-size: 1.4em;
            padding: 12px 24px;
            display: block;
            text-decoration: none;
        }

        nav > ul > li a:hover{
            background-color: yellowgreen;
        }

        nav > ul > li:hover ul.submenu{
            display: block;
        }

        /*====================================================*/
        /* styles for layout 1*/

        #container1{
            background-color: pink;
            width: 100%; /* 100% is the default width for a block */
            height: 100vh; /* 100vh is 100% of the viewport height */
            display: flex;
        }

        #container1 div.left{
            background-color: #456;
            width: 50%;
            height: 100%;

        }

        #container1 div.right{
            background-color: #789;
            width: 50%;
            height: 100%;
        }

        #container1 section.yellow{
            background-color: yellow;
            width: 50%;
            min-height: 100%;
            
        }


        #container1 section.blue{
            background-color: blue;
            width: 50%;
            min-height: 100%;
        }

        #container1 section.green{
            background-color: green;
            height: 50%;
        }

        #container1 section.purple{
            background-color: purple;
            height: 50%;
        }


        /*============================================================*/
        /* styles for layout 2 */

        #container2{
            min-height: 100vh;
            background-color: pink;
            position: relative;
        }

        #container2 div.yellow, #container2 div.green,#container2 div.purple,#container2 div.blue{
            position: absolute;
        }

        #container2 div.yellow{
            top:4px; left: 4px;
            width: 300px; height: 300px;
            background-color: yellow;
            z-index: 2;
        }

        #container2 div.green{
            top:4px; right: 4px;
            width: 150px; height: 150px;
            background-color: green;
        }

        #container2 div.purple{
            bottom: 4px; left: 4px;
            width: 150px; height: 150px;
            background-color: purple;

        }

        #container2 div.blue{
            margin-left: auto; margin-right: auto; /* horizontally centers a block */
            position: relative; top: 50vh; /* nudging the block down 50% of the parent */
            transform: translateY(-50%); /* nudging the block upward 50% of the block height */
            width: 450px; height: 350px;
            background-color: blue;
            
        }


        /*=================================================================*/
        /* styles for layout 3 */
        #container3{
            min-height: 100vh;
            background-color: teal;
            position: relative;
        }

        #container3 div.green, div.blue{
            position: absolute;
        }

        #container3 div.blue{
            background-color: blue;
            left: 0px;
            width:50%;
            height: 100vh;
        }

        #container3 div.green{
            background-color: green;
            right: 0px;
            width: 50%;
            height: 100vh;
        }

        /*=================================================================*/
        /* styles for layout 4 */

        #container4{
            min-height: 100vh;
            background-color: white;
            position: relative;
        }

        #container4  div.yellow{
            position: absolute;
            background-color: yellow;
            left: 0px;
            width: 25%;
            height: 100vh;
        }

        #container4  div.green{
            position: absolute;
            background-color: green;
            left: 25%;
            width: 25%;
            height: 100vh;

        }

        #container4  div.purple{
            position: absolute;
            background-color: purple;
            right: 25%;
            width: 25%;
            height: 100vh;
        }

        #container4 div.blue{
            position: absolute;
            background-color: blue;
            right: 0px;
            width: 25%;
            height: 100vh;
        }

        /*=================================================================*/
        /* styles for layout 5 */

        #container5{
            min-height: 100vh;
            background-color: tan;
            position: relative;
        }

        #container5 div.yellow{
            position: absolute;
            background-color: yellow;
            top: 0px;left:0px;
            width: 25%;
            height: 25%;
        }

        #container5 div.green{
            position: absolute;
            background-color: green;
            top: 0px;left:25%;
            width: 25%;
            height: 25%;
        }

        #container5 div.purple{
            position: absolute;
            background-color: purple;
            top: 0px;right:25%;
            width: 25%;
            height: 25%;
        }

        #container5 div.blue{
            position: absolute;
            background-color: blue;
            top: 0px;right:0px;
            width: 25%;
            height: 25%;
        }

        #container5 div.red{
            position: absolute;
            background-color: red;
            bottom:0px;
            width: 100%;
            height: 75%;
        }

        /*=================================================================*/
        /* styles for layout 6 */

        #container6{
            background-color: tan;
            height: 100vh;
            position: relative;
        }

        #container6 div.red1{
            position: absolute;
            background-color: red;
            top: 0px;
            width: 100%;
            height: 20%;
        }

        #container6 div.blue{
            position: absolute;
            background-color: blue;
            left: 0px;
            width: 33%;
            height: 80%;
        }

        #container6 div.green{
            position: absolute;
            background-color: green;
            left: 30%;
            
            width: 40%;
            height: 80%;
        }

        #container6 div.purple{
            position: absolute;
            background-color: purple;
            right: 0px;
            width: 33%;
            height: 80%;
        }


        #container6 div.red2{
            position: absolute;
            background-color: red;
            bottom: 0px;
            width: 100%;
            height: 20%;
        }