/*style layout w3schools start*/
	* {	 
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: rgb(0, 102, 204);
  padding: 10px;
  text-align: center;
  font-size: 29px;
  color: white;
  background-image: url("woods.png");
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 15%;
  height: 820px; /* only for demonstration, should be removed */
  background: rgb(204, 230, 255);
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type:none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 85%;
  background-color: #ffffff;
  height: 800px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: rgb(0, 102, 204);
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
/*style layout w3schools end*/
    /* link color start */
	/* unvisited link */
	a:link {
	  color: rgb(0, 0, 255);
	}

	/* visited link */
	a:visited {
	  color: rgb(0, 0, 0);
	}

	/* mouse over link */
	a:hover {
	  color: red;
	}

	/* selected link */
	a:active {
	  color: rgb(255, 102, 102);
	}
    /* link color end */
	
   /* fun facts start*/
	#direwolf{
		background-color: rgb(255, 255, 77);
		color: rgb(0, 0, 0);
		padding: 15px;
		margin:20x;
		text-align: left;	
	}
	#druidpack{
		background-color: rgb(255, 255, 77);
		color: rgb(0, 0, 0);
		padding:5px;
		margin:15x;
		text-align: left;
		
	}
	#furcolour{
		background-color: rgb(255, 255, 77);
		color: rgb(0, 0, 0);
		padding: 10px;
		margin:15x;
		text-align: left;	
	}
	#ridinghood{
		background-color: rgb(255, 255, 77);
		color: rgb(0, 0, 0);
		padding: 10px;
		margin:15x;
		text-align: left;	
	}
	/* fun facts end*/
	
    .center {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
 		
	/* table start */
	 table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
		text-align:left;
		background-color: rgb(255, 255, 255);
		table-layout: fixed;
		width: 100%;
	}
	.image{
		border: none;
		border-collapse: collapse;
		width: 40%;
	}
	/*table end */