body{
	font-family: 'Abril Fatface', cursive;
	font-size:1.5vw;
	box-sizing:border-box;
}
#navbar{
	position:absolute;
	width:10vw;
}
#navbar img{
	width:10vw;
	height:10vw;
}
#navbar a{
	display:inline-block;
	width:10vw;
	height:10vw;
	border-style:dotted solid;
  border-width:0.25vw;
	border-color:aquamarine cyan;
}
#navbar a:hover{
	opacity: 0.75;
	border-color:HoneyDew #6495ED;
	border-style:solid dotted;
}
div.main{
	width: 88vw;
	margin-left:12vw;
}
div.main a img:hover{
	opacity:0.5;
}
/**************** INDEX ***********************/
body.index{
	background-image: url("../images/hogwarts.jpg");
	background-repeat:no-repeat;
	background-size:cover;
}
body.index h1{
	font-size:200%;
	color:aqua;
	text-shadow:3px 2px blue;
	text-align:center;
	padding-top:2vw;
}
body.index img#harry{
	width:20vw;
	margin-left:75vw;
}
body.index div#facts{
	color:white;
	width:30vw;
	margin-left:35vw;
	margin-top:-10vw;
}
body.index div ul{
	font-size:75%;
}
body.index div h2{
	text-align:center;
}
/**************** BOOKS ***********************/
body.books{
	
}
body.books table{
	width:100%;
	border-collapse: collapse;
}
body.books tr td{
	width:10vw;
	padding:0.5vw;
	border:0.2vw solid gold;
}
body.books tr td:nth-of-type(4){
	width:58vw;
}
body.books td img{
	width:100%;
}
/**************** BOOK1 ***********************/
body.book1{
	background-image:url("../images/books/book1-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** BOOK2 ***********************/
body.book2{
	background-image:url("../images/books/book2-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** BOOK3 ***********************/
body.book3{
	background-image:url("../images/books/book3-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** BOOK4 ***********************/
body.book4{
	background-image:url("../images/books/book4-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** BOOK5 ***********************/
body.book5{
	background-image:url("../images/books/book5-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** BOOK6 ***********************/
body.book6{
	background-image:url("../images/books/book6-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** BOOK7 ***********************/
body.book7{
	background-image:url("../images/books/book7-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** houses ***********************/
body.houses{
	color:white;
	background-color:black;
}
body.houses table{
	width:100%;
	border-collapse: collapse;
}
body.houses tr td{
	width:10vw;
	padding:0.5vw;
	border:0.2vw solid gold;
}
body.houses tr td:nth-of-type(4){
	width:58vw;
}
body.houses td img{
	width:100%;
}
/**************** Gryffindor ***********************/
body.gryffindor{
	background-image:url("../images/houses/g-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** ravenclaw ***********************/
body.ravenclaw{
	background-image:url("../images/houses/r-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** slytherin ***********************/
body.slytherin{
	background-image:url("../images/houses/s-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** hufflepuff ***********************/
body.hufflepuff{
	background-image:url("../images/houses/h-bkg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
/**************** folk ***********************/
body.folk{
	background-color:navy;
	color:gold;
}
body.folk table{
	width:100%;
	border-collapse: collapse;
}
body.folk tr td{
	width:10vw;
	padding:0.5vw;
	border:0.2vw solid gold;
}
body.folk tr td:nth-of-type(4){
	width:20vw;
}
body.folk td img{
	width:100%;
}
body.folk tr td:nth-of-type(6){
	text-align:center;
}
body.folk tr td:nth-of-type(6) img{
	width:66%;
}
body.folk tr td.profile{
  cursor: pointer ;	
}
body.folk tr td.profile:hover{
	opacity: 0.75;
	border-color:HoneyDew #6495ED;
	border-style:solid dotted;
}
body.folk div.main div#profileDiv{
	position:absolute;
	left:25vw;
	top:5vw;
	width:60vw;
	height:65vw;
	background-color:#e8f7ff;
	display:none;
}
body.folk #closeBtn{
	position:absolute;
	right:2vw;
	top:0vw;
	color:black;
	font-size:200%;
	padding:0 1vw;
	border:0.1vw solid black;
	cursor:pointer;
}
/**************** creatures ***********************/
body.creatures{
	background-color:firebrick;
	color:aliceblue;
}
body.creatures table{
	width:100%;
	border-collapse: collapse;
}
body.creatures tr td{
	width:10vw;
	padding:0.5vw;
	border:0.2vw solid gold;
}
body.creatures tr td:nth-of-type(4){
	width:20vw;
}
body.creatures td img{
	width:100%;
}
body.creatures tr td:nth-of-type(3){
	text-align:center;
}
body.creatures tr td:nth-of-type(3) img{
	width:66%;
}