mystyles.css

/*for more css, refer to css tricks*/


.box {
	color: white;
	/*font-size: 100px; reduce font-sixe so wwe can be the space around with justify-content*/
	font-size: 20px;
	text-align: center;
	text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
	padding: 10px;
}

/*color of each box*/
.box1 { background: #1abc9c ;}
.box2 { background: #3498db ;}
.box3 { background: #9b59b6 ;}
.box4 { background: #34495e ;}
.box5 { background: #f1c40f ;}
.box6 { background: #e67e22;}
.box7 { background: #e74c3c;}
.box8 { background: #bdc3c7;}
.box9 { background: #2ecc71;}
.box10 { background: #16a085;}

.container {
	border: 10px solid mistyrose;
    display: flex;
    flex-direction: space-around; /*the space between by justify-content: space-around; disappears because main-axis is switched to cross-axisbut can be overcome by putting a height or min-height*/
    min-height: 100vh;
    justify-content: center; /*places them to the center*/
    /*justify-content: flex-start; /*left to right - default
	justify-content:space-between; goes from 1st to lastr & place space between
	justify-content: space-around; places space at the start, between and end - left to right 
    */
   


}


/*main-axis -> left to right
	cross-axis -> top to bottom

if flex-direction:column; & height is specified then
 justify-content: center; (vertically place items in center)- places to center & no space between 

*/