/* I set it as a background so it expands it across the page not stretch the image */
.backgroundmemes
{
	/* This is the image on index page */
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-image:url("../Images/zelda.jpg");
	background-repeat: no-repeat;
	background-size: cover;

}
/*Font classes!*/
.headfont
{
	font-family: 'Roboto', sans-serif;
}
/* huh not really a good font after all :/  */
.oswaldfont
{
font-family: 'Oswald', sans-serif;
}
.Montserrat
{
font-family: 'Montserrat', sans-serif;
}
/*Image on banner, i have terrible naming conventions*/
.image2
{
	height: 100%;
	width: 30%;
}
/*Navigation Bar!*/
.topnav
{
	overflow: hidden;
	background-color: #00B5B3;
	position: fixed;
	list-style-type: none;
	margin : 0;
	padding: 0;
	width: 100%;
	height: 50px;
	top: 0;
	left: 0;
	z-index: 9999;  /* So the stack is always at top :) */
}

a.navbar
{
	float: right;
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
}

#middle
{
	/*  Nothing is required. this takes us to content. */
}
/*All these are our panels that takes us to other pages :) */
nav a:hover
{
    background-color: gray;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

div.desc
{
	border: solid #00b5b3;
	color: black;
	border-radius: 15px;
	margin: 0px;
}
.centerpanels
{
	align: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	padding: 20px 5%;
}

.Row
{
    display: table;
    width: 100%;
  /*  border-spacing: 10px;*/
}

.Column
{
    display: table-cell;
	padding: 20px 150px;

}
/* Some hover effect i wanted to test */
.Column img:hover
{
	-webkit-filter: brightness(150%); 
} /* Looks cool :P */


/* Buttons that scroll down in center */
.ScrollInformation
{
	position: relative;
	color: white;
	z-index: 2;
	margin-top:15%;
	color: #EBFFFF;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: 250px;
}
.BannerText
{
	position: relative;
	color: white;
	z-index: 2;
	color: #EBFFFF;
	border: solid #EBFFFF;
	margin-left: auto;
	margin-right: auto;
	width: 180px;
	padding: 2px;
}
/*Cool animations on my navigation bar!*/
nav
{
	transition: all 0.6s ease;
}

nav.hidden
{
    transform: translate3d(0,-100%,0);
}

#page-wrap
 {
  max-width: 500px;
  margin: 1rem auto;
  padding: 1rem;
}

a /* no underlining cause it looks weird when its a link */
{
	text-decoration: none;
}



 /*  Buttons for sub pages*/
.button
{
background-color: #00b5b3;
width : 100px;
border-radius: 5px;
padding: 5px;
height: 20px;
color: white;
}


/* I really need to keep my stuff neater oh well :P */