.wrapper {
	display: grid;
	grid-gap: 10px;
	font-family: Arial, sans-serif;
	font-size: 20px;
}
.wrapper > * {
	padding: 1em;
	border-radius: 1em;
}
navbar {
	list-style-type:none;
	padding: .75em;
	margin: 0;
	overflow: auto;
}
nav li {
	color: white;
}
nav a {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	color:  #01A1DE;
	text-decoration: none;
	display: flex;
}
nav a:hover {
color: #FF6E01;
}
header {
	background-color: #00a1de;
    align-content: center;
	text-align: center;
}
article {
	background-color: #7ab800;
	color:white;
}
aside {
	background-color: #4c5cc5;
}
footer {
	background-color: #FF6E01;
}
footer li {
	color: #FF6E01;
}
.social a {
	color: black;
}
.app img {
	width: 100%;
	max-width: 500px;
}
article aside,
.sidebar aside {
	background-color: white;
	padding: 0.1em;
	border-radius: 0.5em;
}
.nested1,
.nested2 {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto;
}
h1 {
    font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	font-size: 28px;
	color: black;
}
h2 {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: white;
}
h3 {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 24px;
	color: white;
}
h4 {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 20px;
	color: #FF6E01;
}
h5 {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 14px;
	text-align: right;
	color: #FF6E01;
}
p {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: left;
	color:white;
}
footer p {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: left;
	color:black;
}
article figcaption {
	font-family: "Delius Swash Caps", Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: left;
	color: #7ab800;
}

[href*='facebook'] {
	background: white;
  }
  
  [href*='facebook']::before {
	content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/facebook.png);
  }
  
  [href*='twitter'] {
	background: white;
  }
  
  [href*='twitter']::before {
	content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/twitter.png);
  }
  
  [href*='google'] {
	background: white;
  }
  
  [href*='google']::before {
	content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/google.png);
  }
  
  footerul {
	margin: 0 auto;
	max-width: 30rem;
  }
  
  footer a {
	border-radius: 5px;
	color: white;
	display: block;
	font-weight: bold;
	margin: 0.25em;
	padding: 0.5em;
	text-decoration: none;
  }
  
  footer::before {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.75em;
  }
  /*# sourceMappingURL=playtime.css.map */

@media (min-width: 650px) { 
	navbar {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	nav ul {
		display: flex;
		flex-flow: row wrap;
	}
	nav li:nth-child(even) {
		width:40%;
		float: right;
		padding: 0.4em;
	}
	nav li: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;
	}
	nav li:nth-child(odd) {
		width: auto;
		float: none;
		padding: 0.25em 2em;
	}
	nav li:nth-child(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;
	}
}