@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*vormgeving font family is voor lettertype en fontsize de lettergrootte, de extra lettertypes zijn er als hij een lettertype niet herkent dan pakt hij de volgende erachter*/ 
h1{font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";  }
h2{font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 
	font-size: 50px}
p{font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; 
	font-size:30px}
li{font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"}
a{font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"}




/* sections met dezelfde opmaak voor continuiteit en consistency */
#intro, #tamamoNoMae, #kuzunoha, #koreaGumiho, #JapanKitsune, #ChinaHuliJing, #shapeshifting, #foxfire, #illusions, #pokemon, #naruto, #taleOfTheNinetailed, #myRoomateIsAGumiho, #supernatural, #teenwolf {
		display: grid; 
		grid-gap: 16px;
  		padding: 50px;
  		margin: 20px;
		background-color:antiquewhite}
/*grid, alle hastags die ervoor staan, zijn de secties waar dit grid is op toegepast, want css is overkoepelend en dit werkt dus op meerdere pagina's, de gaps zijn zegmaar gutters. de borde die er staat, de pixels die erachter staan geeft aan hoe dik de rand is/hoveel pixels hij heeft, de kleur erachter geeft aan welke kleur hij is*/


#intro .imageIntro:nth-child(1){
	grid-column: 1 / span 4 ;}

/* de cards in het grid, de eerste en in welke plek hij staat met betrekking tot de kollomen*/
#intro .tekstIntro:nth-child(2){
	grid-column: 5 / span 8 ;}
/* de cards in het grid, de tweede en in welke plek hij staatmet betrekking tot de kollomen*/

#imagenNavSection, #PopularStoriesHead, #otherCountriesHead, #recentMediaHead, #powersHead{
		display: grid; 
		grid-gap: 16px;
  		padding: 50px;
		margin: 0px; 
		background-color:#E7E3E1} 


#newsletter{
		display: grid; 
		grid-gap: 16px;
  		padding: 50px;
		margin: 20px; 
		background-color:antiquewhite} 


#contactSection { 		
		display: grid; 
		grid-gap: 16px;	
  		padding: 50px;
		margin: 0px; 
		background-color:#E7E3E1}


footer{
	background-color: grey;}
body{
	background-color: #F5F5F5;}



nav ul {
 list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav ul li {
  float: left;
} /* dit zorgde ervoor dat mijn ul naast elkaar stond en niet onder elkaar*/

nav ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover {
	color: red;}
/* deze funtie is ervoor als je met je muis over de knoppen heen gaat ze van kleur veranderen*/