/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

body {
     width: 70%;
     margin: 0 auto;
}

header, footer {
     display: flex;
     justify-content: space-between;
}

/* This is the color picker for the background */

ul#colorPicker, ul#colorPicker2 {
	list-style-type: none;
     padding: 5px;
}

ul#colorPicker li, ul#colorPicker2 li{
     display: inline;
     padding: 5px;
}

.blackBackground {
	color: white;
	background-color: black;
	border: 1px solid white;
	border-radius: 3px;
	}

.whiteBackground {
     color: rgb(0, 0, 0);
     background-color: white;
     border: 1px solid black;
     border-radius: 3px;
}

/* Styles for the footer */


/* Styles for the main nav  */
.hidden {
     display: none;
}

header li:hover, footer li:hover{
     cursor: pointer;
}

.mainNav ul {
     list-style-type: none;
     padding: 5px;
}
.mainNav li {
     display: inline;
     padding: 5px;
}

.lightNav a{
     text-decoration: none;
     text-transform: uppercase;
     color: white;
}

.lightNav ul li{
     border: 1px solid black;
     border-radius: 3px;
     background-color: black;
}

.darkNav a{
     text-decoration: none;
     text-transform: uppercase;
     color: black;
}

.darkNav ul li{
     border: 1px solid rgb(255, 255, 255);
     border-radius: 3px;
     background-color: rgb(255, 255, 255);
}


/* Styles for the main part of the document */


main {
     display: flex;
     align-items: center;
}

.hello{
     font-size: large;
     font-weight: bold;
     width: 500px;
     margin: 0 auto;
    
}



/******************************************
/* LAYOUT
/*******************************************/
/* header {

}

footer {

} */

/******************************************
/* ADDITIONAL STYLES
/*******************************************/


@media screen and (max-width: 600px){
     body {
          width: 100%;
          margin: 0 auto;
     }
}