/*	Color Pallet Ref

	#A8A7A7  -  Light Grey
	#CC527A  -  Dark Pink
	#E8175D  -  Neon Pink
	#474747  -  Grey
	#363636  -  Charcoal

*/


/* Base Styles *************************
**************************************/

@font-face {
	font-family: 'Streamster';
		src: url('../fonts/Streamster.ttf') format('truetype');

	font-family: 'VHS';
		src: url('../fonts/VCR_OSD_MONO_1.001.ttf') format('truetype');
}

body {
	margin: 0;
	color: #fff;
	font: 1em/1.5 "Helvetica Nueue", Helvetica, Arial, sans-serif;
	background-color: rgb(110, 53, 96);
}

h1 {
	font-size: 5.625rem;
	line-height: 1.5;
	font-weight: normal;
	margin: 12px;
}

h2 {
	font-size: 1.75em;
	color: #CC527A;
}

footer {
	/* color: #E8175D; */
	color: rgb(255, 152, 243);
	text-shadow: 0 0 rgb(255, 97, 237);
	text-shadow: 0 0 20px rgb(255, 0, 181);
	font-size: 4.5em;
	background: linear-gradient(transparent 10%, rgb(72, 52, 77));
}

/* Main Styles ************************
**************************************/


ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

.title {
	font-size: 1.625rem;
	font-weight: 200;
	text-shadow: 0 -4px rgba(255, 255, 255, 0.07),
				 -2px 0 0.2px rgb(252, 23, 118),
				 1px -1px 0.2px rgb(143, 58, 245);
}

.main-header {
	padding-top: 170px;
	height: 400px;
	font-family: 'VHS', "Helvetica Nueue", Helvetica, Arial, sans-serif;
	color: #FFF;
	text-shadow: 0 -8px rgba(255, 255, 255, 0.03),
				-2px 0 0.2px rgb(252, 23, 118),
				 1px -2px 0.2px rgb(120, 58, 245);
	background: linear-gradient(rgb(143, 58, 245), transparent 90%),
				linear-gradient(0deg, rgb(110, 53, 96), transparent),
				 url('../img/NeonRoomsWallpaperA.jpg') no-repeat center;
	background-size: cover;
}

/*.main-header h1 {
	margin: 0;
	padding-top: 40px;
	padding-bottom:io9yu 50px;
	background: linear-gradient(transparent 15%, #000, transparent 90%)
}*/

.intro {
	font-size: 1.25em;
}

.primary-content,
.main-header,
.main-footer {
	text-align: center;
}

.primary-content {
	padding-top: 25px;
	padding-bottom: 95px;
}

.main-footer {
	margin-top: 40px;
	border-bottom: 10px solid #CC527A;
	font-family: 'Streamster', "Helvetica Nueue", Helvetica, Arial, sans-serif;
}

/* Layout Styles *************************
**************************************/

.primary-content {
	max-width: 45%;
	min-width: 45%;
	padding-left: 27.5%;
	padding-right: 27.5%;
	margin: auto;
}

a {
	text-decoration: none;
}

a:link {
	color: rgb(253, 109, 90);
}

a:visited {
	color: #c43b69;
}

a:hover {
	color: rgb(252, 23, 118);
}

a:active {
	color: firebrick;
}

/* DRY */

.rnd {
	border-radius: .5em;
}

.content {
	display: block;
	text-align: center;
	margin: 40px 0 20px;
	padding: 10px 2px;
	background: #363636;
	box-shadow: inset 3px 10px 25px #474747;

}

.content h2 {
	border-bottom: 2px solid white;
	padding-bottom: 15px;
	margin-bottom: 10px;
}

.content img {
	margin: 0;
	max-width: 95%;
}

.content a {
	color: white;
}

/* Floatin */

.content:hover {
		background-color: #424242;
}

/* Media Queries */

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}