html	{
		
		background-color: #555;
		padding: 30px;
		height: auto;
}


body	{
		background-color: pink;
		height: auto;
		padding: 20px;
		margin: 10px;
		
}



header	{
		float: left;
		background-color: #777;
		padding: 25px 10px;
		width: 97%;
		height: 100px;
		margin: 0px;
		
}

 h1		 {
		
		background-color: #777;
		text-align: center;
		font-size: 30px;
		color: white;
		width: 50%;
		overflow: hidden;
		height: 20px;
		padding: 10px 10px;
		margin: 10px;
 }
 ul 	{
		list-style-type: none;
		margin: 10px;
		padding: 5px 10px;
		overflow: hidden;
		background-color: #777;
		height: 20px;
  
}

li {
		float: right;
}

li a {
		display: inline-block;
		color: white;
		text-align: center;
		padding: 5px 5px;
		text-decoration: none;
	}

li a:hover  {
  background-color: #111;
}

/*.active 	{  background-color: #111;} */


nav		 {
  float: left;
  width: 44%;
  height: 220px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 10px;
}


article {
		float: left;
		padding: 10px 10px;
		width: 50%;
		background-color: #ccc;
		height: 220px; /* only for demonstration, should be removed */
		
}

section:after {
		content: "";
		display: table;
		clear: both;
}


footer	{
		background-color: #777;
		padding: 10px;
		text-align: center;
		height: 100px;
}
/* link color */
 a {
  color: white;

}

/* footer hover-link */
a:hover {
  color: hotpink;
}