//Variables//
$primary-color: white;
$secondary-color: black;
$terciary-color: #01A1DE;
$accent-color: #FF6E01;
$alt-color: #7ab800;

$standard-space: 1em;
$narrow-space: 0.75em;
$tiny-space:0.5em;

	.wrapper {
		display: grid;
		grid-gap: 10px;
		font-family: Arial, sans-serif;
		font-size: 20px;
	}
	.wrapper > * {
		padding: $standard-space;
		border-radius: $standard-space;
	}
	navbar {
		list-style-type:none;
		padding: $narrow-space;
		margin: 0;
		overflow: auto;
	}
	//Nesting nav a, nav a hover//
	nav {
		li {
			color: $primary-color;
		}
	    a {
			font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
			color: $terciary-color;
			text-decoration: none;
			display: flex;
		}
		&:hover {
			color: $accent-color;	
		}
	}
	header {
		background-color: $terciary-color;
		align-content: center;
		text-align: center;
	}
	article {
		background-color: $alt-color;
		color:$primary-color;
	}
	aside {
		background-color: #4c5cc5;
	}
	footer {
		background-color:$accent-color;
		
		footer li {
			color: $accent-color;
		}
	.social a {
		color:$secondary-color;
	}
	.app img {
		width: 100%;
		max-width: 500px;
	}
	article aside,
	.sidebar aside {
		background-color: $primary-color;
		padding: 0.1em;
		border-radius: $tiny-space;
	}
	.nested1 {
		display: grid;
		grid-gap: $standard-space;
		grid-template-columns: auto;
	}
	.nested2 {
		@extend .nested1;
	}
	// Mixin with h1,h2,h5 //
	@mixin std-heading {
		font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	}
	h1 {
		font-size: 28px;
		color:darken($secondary-color, 10%);
		@include std-heading;
	}
	h2 {
		font-size: 24px;
		color:lighten($primary-color, 10%);
		@include std-heading;
	}
	h5 {
		@include std-heading;
		font-size: 14px;
		text-align: right;
		color: opacify($accent-color, 0.9);
	}
	// Extend h3,h4 //
	h3 {
		@extend h2;
		text-align: justify;
	}
	h4 {
		@extend h3;
		font-size: 20px;
		color: $accent-color;
	}

	// Extend p, article figcaption //
	p {
		font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
		font-size: 16px;
		text-align: left;
		color: $primary-color;
	}
	article figcaption {
		@extend p;
		color: $alt-color;
	}
// Footter styling //

$social: (
  'facebook': $terciary-color,
  'twitter':$terciary-color,
  'google': $terciary-color,
);

// loop, to style social media links
@each $name, $color in $social {
  // selector based on href name
  [href*='#{$name}'] {
    background: $color;
        
    &::before {
      content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/#{$name}.png);
    }
  }
}

// styles
footer {
	&ul {
		margin: 0 auto;
		max-width: 30rem;
	}
	a {
	border-radius: 5px;
	color: $primary-color;
	display: block;
	font-weight: bold;
	margin: 0.25em;
	padding: 0.5em;
	text-decoration: none;
	}
	&::before {
		display: inline-block;
		vertical-align: middle;
		margin: 0 $narrow-space;
	}
}

@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;
	}
}