@media (min-width: 650px) {
    navbar {
	  grid-column: 1 / 3;
	  grid-row: 1 / 2;
	}
//nesting nav ul, nav li nth child(even, odd)//
		nav {
		    ul {
			display: flex;
			flex-flow: row wrap;
			}
			li {
				&:nth-child(even) {
				width: 40%;
				float: right;
				padding: 0.4em;
		        }
				&:nth-child(odd) {
				width: 40%;
				float: left;
				padding: 0.4em;
			    }
			}
		}
	header {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	article {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	.sidebar {
		grid-column: 2 / 3;
		grid-row: 2 / 4;
	}
	footer {
		grid-column: 1 / 3;	
		grid-row: 4 / 5;
	}
	.app img {
		width: 100%;
		max-width:none;
	}
	h1,h2,h3 {
		font-size:2rem;
	}
	h4,h5,article figcaption,p, a {
		font-size:1.5rem;
	}
}
@media (min-width: 1000px) { 
	navbar {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	navbar {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		justify-items: center;
	}
//if,else nav li nth-child (even odd)//
	@mixin navstyle ($width, $float, $padding) {
		width: $width;
		float: $float;
		padding: $padding;
	  }
	  @mixin floatme($float: right) {
		float: $float;
		@if $float == right {
            margin: 0;
		}
		@else if $float == left {
            margin: 0;
		}
		@else {
		  margin: 0 auto;
		}
	  }	
//nesting nav li, nav li: nth-child (odd, even)//
	nav {
		&li:nth-child(odd,even) {
		width: auto;
		float: none;
		padding: 0.25em 2em;
	    }
	}
	header {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	article {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	.nested1 {
		grid-template-columns: repeat(3, 1fr);
	}	
	.nested1 img {
		width: 100%;
		max-width: 300px;
	}	
	.sidebar {
		grid-column: 2 / 3;
		grid-row: 2 / 4;
	}
	footer {
		grid-column: 1 / 3;	
		grid-row: 4 / 5;
	}
	.app img {
		width: 100%;
		max-width: none;
	}
}