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

nav{border-bottom:0.5vw dotted gray;margin-bottom: 15vw; }
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;}

    *{margin:0;padding: 0;}
/* canvas */
main#canvas1{width:35.5vw; height: 25vw; float: left; margin-left: 28%;margin-top:-10%;}

section{width: 49.5%; height:34.1%; float:left;}
.blue{width:11%;height:100%;}
.red{width:5%;height: 100%;margin-left:15.7%;margin-top: -0.01%;}
.bike{width:2%;height: 100%;margin-left:18%;margin-top: -0.01%;}
.aaa{width:5.5%;height: 100%;margin-left:17%;margin-top: -0.01%;}


article{width: 90%; height:100%; float: left;}
.white{width: 70%;height:100%;margin-left: 100%;}
.gray{width: 183%;height: 100%;margin-left:100%;}
.fan{width: 183%;height: 100%;margin-left:100%;}
.bbb{width: 75%;height: 100%;margin-left:100%;}

header{float:left;width:80%;height:50%;}
.black{width:60%; height: 100%;margin-left: 90%;}
.yellow{width: 50%; height: 100%; margin-left: 101%;}
.slice{width: 100%; height: 100%; margin-left: 101%;}
.ccc{width: 100%; height: 100%; margin-left: 101%;}

figure{width:80%; height:50%; float: left;}
.silver{width: 90%;margin-left: 100%;height: 100%;margin-top: 0%;}
.purple{width: 90%;margin-left: 100%;height: 100%;margin-top: 0%;}
.cake{width: 270%;margin-left: 100%;height: 100%;margin-top: 0%;}
.ddd{width: 200%;margin-left: 100%;height: 100%;margin-top: 0%;}
.green{width: 215%;margin-left: 305%;margin-top: -1710%;height: 100%;}


.blue:hover{background-color: red;}
.white:hover{background-color: blue;}
.black:hover{background-color: black;}
.silver:hover{background-color: yellow;}

.red:hover{background-color: pink;}
.gray:hover{background-color: green;}
.yellow:hover{background-color: gray;}
.purple:hover{background-color: purple;}

.bike:hover{background-color: orange;}
.fan:hover{background-color: blue;}
.slice:hover{background-color: brown;}
.cake:hover{background-color: limegreen;}

.aaa:hover{background-color: black;}
.bbb:hover{background-color: darkblue;}
.ccc:hover{background-color: lightgreen;}
.ddd:hover{background-color: yellow;}
.green:hover{background-color: red;}




.blue{background-color: #ffe8ad;}
.white{background-color: #413443;}
.black{background-color: #f0e4b4;}
.silver{background-color: #5e584c;}

.red{background-color: #c4b292;}
.gray{background-color: #e5d4ac;}
.yellow{background-color: #87654c;}
.purple{background-color: #4b4437;}

.bike{background-color: #f0dfb3;}
.fan{background-color: #555042;}
.slice{background-color: #987b5f;}
.cake{background-color: #f5ebbc;}

.aaa{background-color: #ccc19c;}
.bbb{background-color: #5e594e;}
.ccc{background-color: #fbf0c3;}
.ddd{background-color: #463a42;}
.green{background-color: #fee6ad;}