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