@font-face{
	font-family:playtime;
	src: url(../fonts/playtime.ttf);
}

@font-face{
	font-family:nunito;
	src: url(../fonts/Nunito-Light.ttf);
}

@font-face{
	font-family:nunito;
	src: url(../fonts/Nunito-Bold.ttf);
	font-weight:bold;
}

@font-face{
	font-family:concertone;
	src: url(../fonts/ConcertOne-Regular.ttf);
}

body{
	font-family:nunito;
	font-size:20px;
	background:#7271ac url("img/background.png") fixed;
	/* background:#5b5a99 url("img/background.png") fixed; */
}


/* Top Bar */

#mainmenu{
	z-index:100;
	background-color:white;
	position:fixed;
	width:100%;
	top:0;
	left:0;
	height:56px;
	border-top-style:solid;
	border-top-width:5px;
	border-top-color:black;
}




/* Title Banner */

#mainbanner{
	z-index:99;
	height:640px;
	position: absolute;
	width:100%;
	top:56;
	left:0;
	right:0;
	margin:auto;
	background-color:black;
	box-shadow: 0px 2px 16px #000000;
	-webkit-box-shadow: 0px 2px 16px #000000;
	-moz-box-shadow: 0px 2px 16px #000000;
}

#logoanimation{
	background-color:white;
	/* background-attachment:fixed; */
	background-image: url("img/logo-doodles.jpg");
	-webkit-animation: doodleScroll 50s linear infinite;
	animation: doodleScroll 50s linear infinite;
}

@-webkit-keyframes doodleScroll {
from {background-position: 0 0;}
to {background-position: -1220px -370px;}
}

@keyframes doodleScroll {
from {background-position: 0 0;}
to {background-position: -1220px -370px;}
}

#logocover{
	background-image:url("img/logo-cover.png");
}

.intro{
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	width:834px;
	height:inherit;
}

#contentmenu{
	z-index:98;
	margin:auto;
	left:0;
	right:0;
	height:48px;
	/* max-width:70%;
	min-width:984px; */
	width:100%;
	background-color:black;
	color:b684eb;
	font-weight:bold;
	display:flex;
	align-items:center;
	justify-content:center;
	/* border-bottom-left-radius:16px;
	border-bottom-right-radius:16px; */
	-webkit-box-shadow: 0px 0px 32px 4px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 32px 4px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 32px 4px rgba(0,0,0,0.75);
}

.menulinks{
	position:relative;
	margin:auto;
	width:984px;
	min-width:984px;
	text-align:center;
}

.nonfixed{
	position:absolute;
}

.fixed{
    position: fixed;
	top:61px;
}

#contentmenu a{
	font-family:playtime;
	padding-left:16px;
	padding-right:16px;
	text-decoration:none;
	color:white;
	font-weight:bold;
	transition: color 0.2s ease-in;
	-moz-transition: color 0.2s ease-in;
	-webkit-transition: color 0.2s ease-in;
	-o-transition: color 0.2s ease-in;
}

#contentmenu a:hover{
	color:yellow;
	transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-webkit-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
}



#bottomeffect{
	position:fixed;
	height:360px;
	background-image:url("img/bottom-bg.png");
	bottom:0;
	left:0;
	width:100%;
}



/* Content */

#contentframe{
	top:696;
	background-image: url("img/clouds.png");
}

#topcontent{
	margin:auto;
	margin-top:72px;
	width:720px;
	position:relative;
}

.pagecover{
	position:absolute;
	margin:auto;
	width:100%;
	height:auto;
	left:0;
	right:0;
}

#maincontent{
	background-color:rgba(255,255,255,0.7);
	-webkit-box-shadow: 0px 0px 16px 16px rgba(255,255,255,0.7);
	-moz-box-shadow: 0px 0px 16px 16px rgba(255,255,255,0.7);
	box-shadow: 0px 0px 16px 16px rgba(255,255,255,0.7);
	padding-bottom:64px;
}

#maincontent h1{
	padding-top:52px;
	font-size:30px;
}

.innercontent{
	position:relative;
	width:800px;
	margin:auto;
	padding-left:56px;
	padding-right:56px;
	padding-top:8px;
	padding-bottom:8px;
}

.content-item{
	color:white;
	z-index:97;
	display:block;
	width:720px;
	height:360px;
	border:2px solid black;
	border-radius:16px;
	position:relative;
	margin:auto;
	left:0;
	right:0;
	margin-top:48px;
	margin-bottom:48px;
	transition: border-color 0.2s ease-in;
	-moz-transition: border-color 0.2s ease-in;
	-webkit-transition: border-color 0.2s ease-in;
	-o-transition: border-color 0.2s ease-in;
	-webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);
}

.content-item:hover{
	color:yellow;
	border-color:yellow;
	transition: border-color 0.2s ease-out;
	-moz-transition: border-color 0.2s ease-out;
	-webkit-transition: border-color 0.2s ease-out;
	-o-transition: border-color 0.2s ease-out;
}

.description{
	background-color:black;
	width:720px;
	height:40px;
	display:flex;
	align-items: center;
	justify-content:center;
	border-bottom-left-radius:13px;
	border-bottom-right-radius:13px;
	position:absolute;
	bottom:0;
	font-weight:normal;
	font-family:concertone;
}

#psycutlery{
	background-image:url("img/psycutlery-banner.png")
}

#artpal{
	background-image:url("img/artpal-banner.jpg")
}

#bandcamp{
	background-image:url("img/yoshiman-banner.jpg")
}

.textcontain{
	width:720px;
	position:relative;
	margin:auto;
}

.textcontain p{
	margin-top:32px;
	margin-bottom:32px;
	padding-left:32px;
	padding-right:64px;
}

.anchor{
  display: block;
  height: 64px;
  margin-top: -128px;
  visibility: hidden;
}

h1{
	font-family:concertone;
}

#pagebottom{
	background-color:black;
	color:white;
	box-shadow: 0px -2px 16px #000000;
	-webkit-box-shadow: 0px -2px 16px #000000;
	-moz-box-shadow: 0px -2px 16px #000000;
}

#copyright{
	font-family:playtime;
	font-weight:bold;
	text-align:center;
	padding:4px;
}