body {
	background-color:whitesmoke;
	font-family:tahoma;
	color:darkolivegreen;
}
	
header {
	background-color: darkkhaki;
}

nav {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}

nav ul li a {
	display:block;
	color:ivory;
	text-align:center;
	padding: 14px 16px;
	text-decoration:none;
}
	
nav ul li a:hover {
	color:#330010;
}

#content {
	display:flex;
	width:100%;
}

#featuredWorks {
	background-color:#330010;
	color:whitesmoke;
}
	
#featuredWorks img {
	width:90%;
	display:block;
	margin:auto;
	margin-top: 20px;
}
	
footer {
	background-color:darkkhaki;
}
	
footer p {
	display:block;
	color:ivory;
	text-align:center;
}

@media only screen and (min-width:1000px){
	body {
		font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
		line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px) / (1600 - 300)));
	}
	
	nav ul {
		display: flex;
		flex-direction:row;
		justify-content:space-evenly;
	}
	
	#sidebar {
		display:flex;
		flex-direction:column;
		flex:2;
		background-size:cover;
		background-repeat:no-repeat;
		background-color:ivory;
		color:black;
	}
		
	section {
		display:flex;
		position:relative;
		flex-direction:column;
		flex:10;
		padding-left:25px;
		padding-right:25px;
	}
		
	#strip {
		display:flex;
		flex:0;
		padding:7px;
		background-color:darkkhaki;
	}
		
	#featuredWorks {
		flex:4;
	}
		
	article {
		margin-bottom:150px;
	}
	
	footer {
		position:absolute;
		width:95%;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
	}
	
	.mobile {
		display:none;
	}
}
	
@media only screen and (max-width:999px){	
	header {
		width:100%;
	}
	
	nav {
		max-height:0;
	}
	
	input:checked ~ nav {
		max-height:100%;
	}
	
	input[id="menuButton"] + label{
		display:block;
		cursor:pointer;
		height: 25px;
		background-image:url(Images/Icons/menu.png);
		background-repeat: no-repeat;
		background-size: 25px 25px;
		background-position: 2% 50%;
		padding-top: 10px;
	}
		
	input#menuButton {
		display:none;
	}
		
	input[id="menuButton"]:checked + label {
		display:block;
		cursor:pointer;
		height: 25px;
		background-image:url(Images/Icons/close.png);
		background-repeat: no-repeat;
		background-size: 25px 25px;
		background-position: 2% 50%;
		padding-top: 10px;
	}

	#content {
		flex-direction:column;
	}
		
	#sidebar {
		display:none;
	}
	
	section {
		padding-left:10px;
		padding-right:10px;
	}
	
	#strip {
		height:7px;
		background-color:darkkhaki;
	}
	
	.nonmobile{
		display:none;
	}
}