/* Fonts */
@font-face {
	font-family: AlphabetoftheMagi;
	src: url(../fonts/alphabetofthemagi.woff2) format("woff2"),
	     url(../fonts/alphabetofthemagi.woff) format("woff");
}

@font-face {
	font-family: Angelic;
	src: url(../fonts/angelic.woff2) format("woff2"),
	     url(../fonts/angelic.woff) format("woff");
}

@font-face {
	font-family: Daggers;
	src: url(../fonts/daggers.woff2) format("woff2"),
	     url(../fonts/daggers.woff) format("woff");
}

@font-face {
	font-family: Enochian;
	src: url(../fonts/enochian.woff2) format("woff2"),
	     url(../fonts/enochian.woff) format("woff");
}

@font-face {
	font-family: Malachim;
	src: url(../fonts/malachim.woff2) format("woff2"),
	     url(../fonts/malachim.woff) format("woff");
}

@font-face {
	font-family: PassingtheRiver;
	src: url(../fonts/passingtheriver.woff2) format("woff2"),
		 url(../fonts/passingtheriver.woff) format("woff");
}

@font-face {
	font-family: Theban;
	src: url(../fonts/theban.woff2) format("woff2"),
	     url(../fonts/theban.woff) format("woff");
}

/* Overall */
html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
	font-family: "Open Sans Condensed";
}

.pure-g > div {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/* Helpers */
.padding {
	padding: 25px;
}

/* Main Styling */
body {
	background: #4d3391;
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
}

.grimoiremenu { /* Container for the menu. */
}

.pure-menu-heading { /* The desktop+magic logo. */
	color: #ffffff;
	font-size: 24px;
}

.nav-item { /* Each side tab. */
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://theghosthybrid.buzz/data/files/cardboard.png);
	border-radius: 35px 0 0 35px;
	height: 100%;
	margin: 0 0 10px 0;
	padding: .5em 1em;
	position: relative;
	vertical-align: middle;
}

.nav-link { /* Just the text in the tab. */
	color: #000000;
	font-weight: bolder;
	font-size: 24px;
	padding: .5em 1em;
	text-align: right;
}

.active { /* Targets the active tab. */
	background: url(https://theghosthybrid.buzz/data/files/cardboard.png);
}

.menuicon { /* Hides the hamburger menu until viewed on mobile. */
	display: none;
}

@media screen and (max-width: 567px) { /* Shows the hamburger menu and reformats the menu on mobile. */
	.menuicon {
		background: url(https://theghosthybrid.buzz/data/files/cardboard.png);
		border-radius: 35px 35px 0 0;
		display: inline-block;
		float: left;
		padding: 12px 24px 0 24px;
		position: relative;
	}
	.pure-menu-list {
		background: url(https://theghosthybrid.buzz/data/files/cardboard.png);
		display: none;
		position: absolute;
		top: 127px;
		width: 62px;
		z-index: 999;
	}
	.pure-menu-list .nav-item {
		background: none !important;
		border-radius: 0;
		display: inline;
		margin: 0;
	}
	.pure-menu-list .nav-link {
		font-size: 12px;
	}
	.pure-menu-list .nav-link:hover {
		background-color: white;
		border-radius: 0;
	}
}

.bodybox { /* Container for the main content of each page. */
	background: url(https://theghosthybrid.buzz/data/files/cardboard.png);
	border-radius: 35px;
	z-index: 998;
}

.contentitem { /* Container for each section of info. */
}

.contentitem h1 { /* Headers in each section of info. */
	font-family: Raleway;
	font-size: 40px;
	font-weight: bolder;
	margin: 0;
	padding: 0 0 10px 0;
}

.contentitem h2 { /* Smaller headers in each section of info. */
	margin: 0;
	padding: 0 0 10px 0;
}

.contentitem h3 { /* Smallest headers in each section of info. */
	margin: 0;
	padding: 10px 0;
}

.contentitem a { /* Links in each section of info. */
	text-decoration: none;
}

.contenttext { /* White box for contrast-sensitive info content. */
	background: rgba(255, 255, 255, 0.5);
	padding: 25px 25px 15px 25px;
}

.contentitem p { /* Main paragraphs in each section of info. */
	font-size: 18px;
	margin: 0;
	padding: 0 0 10px 0;
}

.quotesbox { /* Container for the quotes sidebar. */
	float: right;
	position: relative;
}

.quote { /* Each white box. */
	background: #ffffff;
	border: 3px solid #000000;
	margin: 10px;
	padding: 10px;
}

.quote p { /* The actual text of the quote. */
	padding: 0 10px;
}