/*bootstrap breakpoint:
	Extra Small     none    <576px
	Small           sm      >= 576px
	Medium			md		>= 768px
	Large			lg		>= 992px
	Extra Large		xl		>= 1200px
	Extra Extra Lg	xxl		>=1400px
*/

/*Basic page will be designed at 3 levels: Extra Small Default,	Medium, Large, & XXL */

* {
	font-family: 'Courier New', Courier, monospace;
}

/* I like to use this class as I am programming my HTML to see the structure of elements*/
.border{
	border: white 1px solid;
}

/*The idea of having another white website makes my head hurt!*/
html{
	background-color: black;
}

/*Think of this as the page wrapper - I guess this is an older way of thinking!*/
body { 
	background-color: #000011;
	color: white;
	font-size: 12px;
}

header{
	padding: 15px;
}

nav{
	padding: 10px;
}

main{
	margin-left: 5%;
	margin-right: 5%;
}

/*As per convention, I styled this from smallest screen as default up to a larger size using the bootstrap breakpoints*/

@media screen and (min-width: 768px){
	body{
		font-size: 14px;
		margin-left: 10px;
		margin-right: 10px;
	}
}
@media screen and (min-width: 992px){
	body{
		font-size: 16px;
		margin-left: 20px;
		margin-right: 20px;
	}
}
@media screen and (min-width: 1400px){
	body {
		font-size: 18px;
		margin-left: 30px;
		margin-right: 30px;
	}
}