/*
	.......................................................
	-----------  _   _   _   _   _   _ --------My-----------
    ----------- / \ / \ / \ / \ / \ / \ -------Morning------
    -----------( c | o | f | f | e | e )-------Ritual!!-----
    ------------\_/ \_/ \_/ \_/ \_/ \_/ --------------------
    --------------------------------------------------------
    ......................................................*/

nav{border-bottom:0.5vw dotted gray;margin-bottom: 10vw;}
li{display: inline-block; width: 10vw; float: center; margin-left: 3.2vw; margin-top: 5vw;
    margin-bottom: 2.3vw; list-style: none;  font-size: 1.7em;}
    a{text-decoration:none;}
    a:link{text-decoration: none; color: black;}
    a:visited{text-decoration: none;color:#4169E1;}
    a:hover{color:black; text-decoration: underline;}
    h1{text-align: center;margin-top: 10vw;}




/* exercise #3  #2 div art*/
*{margin:0;padding: 0;}
/* canvas */
main#canvas1{width:40vw; height: 58.5vw; float: left; margin-left: 30.4%;margin-top:0%;}

/* box #1 */
section{width: 49.5%; height:34.1%; float:left;}

/* box #2 */
article{width: 90%; height: 54.5%; float: left;}
.white{margin-left: 20%; width: 90%; height:58%; margin-top: 43%; float: right;}
.orange{margin-left: 0.2%; width: 90%; height:58%; margin-top: 43%; float: left;}
.pink{margin-left: 10%; width: 91%; height:53%; float: left;}
.red{margin-left: 0%; width: 90%; height:53%; float: left;}

/* box #3 */
header{float:left;width:80%;height:50%;}
.black{float: left; width: 90%; height: 50%;margin-left: 20%;margin-top: 32%;}
.yellow{float: left; width: 82%; height: 50%;margin-left:-0.9%;margin-top: 32%;}
.water{float: left; width: 90%; height: 47%;margin-left: 20%;margin-top: 0%;}
.ruby{float: left; width: 82%; height: 47%;margin-left:-0.9%;margin-top: 0%;}

/* box #4 */
figure{width:80%; height:50%; float: left;}
.silver{float: left;width:58%; height:60%; margin-left: 35%;margin-top: 20%;}
.brown{float: left;width:60%; height:45%; margin-left: 0%;margin-top: 22%;}
.lightgreen{float: left;width:53.5%; height:42%; margin-left: 35%;margin-top:-0.22%;}
.lemon{float: left;width:49%; height:19.5%; margin-left: -0.9%;margin-top: -27.5%;}

/* hover */
section:hover{background-color: black;}
article:hover{background-color: cyan;}
header:hover{background-color:fuchsia; }
figure:hover{background-color: gray;}

/* background color */
.blue{background-color: #309ed9; }
.green{background-color: #61a946;}
.navy{background-color: #295199;}
.purple{background-color: #484d91;}
.white{background-color:#FBE619;}
.orange{background-color: #e3a01d;}
.pink{background-color:#ba327d;}
.red{background-color: #c72f20;}
.black{background-color:#565298;}
.yellow{background-color: #295199;}
.water{background-color: #61a946;}
.ruby{background-color: #2b9dd9;}
.silver{background-color:#c63323;}
.brown{background-color:#bd317b;}
.lightgreen{background-color:#e29e1f;}
.lemon{background-color:#fbe619;}