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

}

body {
  font-family:verdana;
  background-color:sandybrown;

}

#container {
    background-color: rgba(255,255,255,.7);
    width:70%; min-height: 800px; 
    margin:0px auto; 
}

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

h1 span{
    color:whitesmoke;
    text-shadow:0px 0px 8px #222
}

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: 56px; left:0px;
    border: 4px solid black;
    display: none;

}
nav > ul > li a {
    font-size: 1.4em;
    padding: 8px 12px;
    display: block;
    text-decoration: none; 
    border: 2px solid blue;
  
}

nav > ul > li a:hover{
    background-color: #ffc
}

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%;
    display:flex;

}

#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 {
    background-color:grey;
    height:100vh;
    width:50%;
}

/*===========================================*/
/* Styles for Layout 3 */


#container3 {
    min-height:100vh;
    background-color:pink;
}
div.yellow, div.green, div.purple,div.bluew {
    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;
    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;

}

/*===========================================*/
/* Styles for Layout 4*/

#container4 {
    min-height:100vh;
}
    div.top {
    min-height:25vh;
    width:100%;
    background-color: sandybrown;
    position:top;
}

div.center {

    background-color:red;
    min-height:40vh;
    width:100%;
    
}

section.left{
    background-color:blue;
    min-height:40vh;
    width:50%;
    position:bottom left;
}

section.right{
    background-color:green;
    min-height:40vh;
    width:50%;
    position: absolute; bottom:-5%;  right:0%;

}