:root {
	--snow: #E9E9E9;
	--sky: #C2C2C2;
	--mitera: #E0D0E2;
	--void: #575757;
	--creation: #93679B;
}

/*base*/
body {
	font-family: "Comic Neue", sans-serif;
	font-size: 1.1em;
	background-color: var(--snow);
	color: var(--void);
	margin: 0;
}

/*headings*/
h1 {
	font-size: 1.6em;
	font-family: "Amatic SC", sans-serif;
}

/*links*/
a {
	color: var(--creation);
}
a:hover {
	color: var(--mitera);
}

/*Main Page Content*/
.page {
	padding: 0 20px;
}

/* Navigation Bar */
.nav {
  overflow: hidden;
  background-color: var(--sky);
  font-family: "Amatic SC", sans-serif;
}
/*Paradise is Silent*/
.navtitle {
  font-size: 1.3em;
  color: var(--creation);
  padding: 14px 16px;
  margin: 0;
}
/* Navigation Buttons */
.nav a {
  float: left;
  font-size: 1.3em;
  color: var(--void);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Subnavigation Menu */
.subnav {
  float: left;
  overflow: hidden;
}
/* Subnavigation Buttons */
.subnav .subnavbtn {
  font-size: 1.3em;
  border: none;
  outline: none;
  color: var(--void);
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
}
/* Nav Hover */
.nav a:hover, .subnav:hover .subnavbtn {
  color: var(--creation);
  background-color: var(--mitera);
}
/* Subnav Content */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: var(--creation);
  width: 100%;
  z-index: 1;
}
/* Subnav Links */
.subnav-content a {
  float: left;
  color: var(--snow);
  text-decoration: none;
}
/* Subnav Hover */
.subnav-content a:hover {
  background-color: var(--mitera);
  color: var(--creation);
}
/* Subnavigation Open on Hover */
.subnav:hover .subnav-content {
  display: block;
}
/* Mobile Settings */
@media only screen and (max-width: 900px) /*mobile*/ {
	.mobileTitle {
		font-size: 1.6em;
		color: var(--creation);
		padding: 14px 16px;
		margin: 0;
		font-family: "Amatic SC", sans-serif;
		text-align: center;
	}
	.nav {
		display: none;
	}
	.mobileNav {
		display: none;
		font-family: "Amatic SC", sans-serif;
		background-color: var(--sky);
		list-style-type: none;
		text-align: center;
		padding: 0;
	}
	.toggleButton {
		margin: 0 auto;
		display: block;
		background-color: var(--snow);
		border: none;
	}
	.mobileNav li {
		padding: 0;
		font-size: 1.3em;
	}
	.mobileHeader {
		color: var(--creation);
		text-decoration: underline;
	}
	.mobileNav a {
		text-decoration: none;
		color: var(--mitera);
		background-color: var(--creation);
		display: block;
		padding: 5px;
	}
}
@media only screen and (min-width: 900px) /*widescreen*/ {
	.toggleButton {
		display: none;
	}
	.mobileNav {
		display: none;
	}
	.mobileTitle {
		display: none;
	}
}


/*Test/Key for mobile compatibilty*/

/*This applies to wider screens only*/
@media only screen and (min-width: 900px) /*widescreen*/ {
	.mobileTest {
		display: none;
	}
}

/*This applies to mobile screens only*/
@media only screen and (max-width: 900px) /*mobile*/ {
	.widescreenTest {
		display: none;
	}
}