/* Stylesheet to apply  to all viewports*/

body, header, nav, main, footer, h1, h2, div {
	margin:0;
	padding:0;
	border:0;
}

#desktop, #tablet, #mobile, #print
footer{
	background: linear-gradient(yellow, orange, salmon, red, black);
}
h1{
	color: darkgray;
	text-align: justify;
}
nav{
    background-color: #e69b10;
}

nav ul{
    list-style-type: none;
    margin: 0;
    text-align: center;
}

nav li{
    display: inline-block;
    font-size: 2em;
}

nav li a{
    display: block;
    color: #fff;
    text-align: center;
    padding: .5em 1em;
    text-decoration: none;
}

/*Mobile Styles*/
@media screen and (max-width: 30em) {
	#mobile {
		display: block;
	}
	
	h3, p {
		color: gray;
	}
	
}

/* Tablet Styles*/
@media screen and (min-width: 30.1em) and (max-width: 48em) {
	#tablet {
		display: block;
	}
	
	h3, p {
		color: lightgoldenrodyellow;
	}

	#box1, #box2, #box3 {
		float: left;
		width: 45%;
		margin: 1% 2%;
	}	
}

/* desktop Style*/
@media screen and (min-width: 48.1em) {
	#desktop {
		display: block;
	}
	h3, p{
		color:tan;
	}
	
	#box1, #box2, #box3{
		float: left;
		width:33%;
		margin: 1% 2%;
	}
}
/* Print Styles*/
@media print {
	#print{
		display: block;
	}
	
	#box2 {
		border-top: 2px solid blue;
		border-bottom: 2px solid blue;
	}
}