body {
    font-family: Impact;
    background-color: sandybrown;
}

#container {
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid darkorange;
    width: 80%; min-height: 800px;
    margin: 0px auto;
}

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

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

nav {
    border: 2px solid darkorange;

}

nav ul {
    list-style: none;
    text-align: center;
}

nav > ul > li {
    
    display: inline-block;
    height: 60px;
    margin: 8px;
    position: relative;
}

ul.submenu {
    position: absolute;
    top: 60px; left: 0px;
    display: none;
}

nav > ul > li a {
    font-size: 1.4em;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    border: 2px solid darkorange;

}

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

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


/* =========================================== */
/* Layout 1 */

#container1 {
    background-color: pink; 
    width: 100%;
    height: 100vh;
    display: flex;
}

#container1 div.left {
    background-color: grey;
    width: 50%;
    height: 100%;
    display: flex;
}

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

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


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

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

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

/* =========================================== */
/* Layout 2 */

#container2 {
    background-color: pink; 
    width: 100%;
    height: 100vh;
    display: flex;
}

#container2 div.left {
    background-color: grey;
    width: 50%;
    height: 100%;
    display: flex;
}

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

    
}

#container2 section.yellow {
    background-color:yellow;
    width: 50%;
}


#container2 section.blue {
    background-color:blue;
    width: 50%;
}

#container2 section.purple {
    background-color: orangered;
    width: 100vh;
    height: 50%;
}

#container2 section.green {
    background-color: cyan;
    width: 100vh;
    height: 50%
}

/* =========================================== */
/* Layout 3 */

#container3 {
    background-color: pink; 
    width: 100%;
    height: 100vh;
    display: flex;
}

#container3 div.left {
    background-color: grey;
    width: 50%;
    height: 100%;
}

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

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


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

#container3 section.purple {
    background-color: orangered;
    width: 100vh;  height: 50%
}

#container3 section.green {
    background-color: cyan;
    width: 100vh;  height: 50%
}

/* =========================================== */
/* Layout 4 */

#container4 {
    background-color: pink; 
    width: 100%;
    height: 100vh;
    display: flex;
}

#container4 div.left {
    background-color: rgb(0, 255, 128);
    width: 50%;
    height: 100%;
    display: flex;
}

#container4 div.right {
    background-color: rgb(0, 128, 255);
    width: 50%;
    height: 100%;
    display: flex
    
}


/* =========================================== */
/* Layout 5 */

#container5 {
    background-color: rgba(255, 192, 203, 0); 
    width: 100%;
    height: 100vh;
    display: flex;
}

#container5 div.left {
    background-color: rgba(128, 128, 128, 0);
    width: 100%;
    height: 100%;
    
}

#container5 div.right {
    background-color: rgba(119, 136, 153, 0);
    width: 100%;
    height: 100%;
    
    
}

#container5 section.yellow {
    background-color:yellow;
    width: 200%; height: 20%;
}


#container5 section.blue {
    background-color:blue;
    width: 200%; height: 20%
}

#container5 section.purple {
    background-color: orangered;
    width: 200%;
}

#container5 section.green {
    background-color: cyan;
    width: 50%
}

/* =========================================== */
/* Layout 6 */

#container6 {
    min-height: 100vh;
    background-color: rgb(255, 255, 255);
    position: relative;
   
}

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

div.yellow {
    top: 4px; left: 4px;
    width: 300px; height: 300px;
    background-color: yellow;
}

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

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

div.blue {
    margin-left: auto; margin-right: auto;
    position: relative; top: 50vh;
    transform: translateY(-50%);
    width: 450px; height: 350px;
    background-color: blue;
    
}