/* bp 0.1.0 */

#black{background-color:black;color:white;}
#white{background-color:white;color:black;}
#gray{background-color:gray;color:white;}
#red{background-color:red;color:white;}
#orange{background-color:white;color:white;}
#yellow{background-color:white;color:black;}
#green{background-color:white;color:white;}
#blue{background-color:blue;color:white;}
#indigo{background-color:indigo;color:white;}
#violet{background-color:violet;color:white;}

A{text-decoration:none;}
article{width:80%;height:auto;display:flex;}
body{margin:0;font-family:’Arial’;}
Header{height:50px;}
header ul{margin:5px;padding:0;list-style:none;}
header ul li{margin:0;padding:5px;display:inline-block;}
nav{width:10%;height:auto;display:flex;}
Nav ul{margin:5px;padding:0;list-style:none;}
Nav ul li{margin:0;padding:5px;}
P{margin:0;padding:0;}
section{width:10%;height:auto;display:flex;}
Ul{margin:0;padding:0;list-style:none;}
Li{margin:0;padding:0;}

.box{width:100%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c1{width:10%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c2{width:20%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c3{width:30%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c4{width:40%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c5{width:50%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c6{width:60%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c7{width:70%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c8{width:80%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c9{width:90%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}
.c10{width:100%;height:auto;margin:5px;display:flex;flex-wrap:wrap;}

@media (max-width:400px){
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9{width:100%;height:auto;margin:5px;}
}