@import url('https://fonts.googleapis.com/css?family=Fira+Sans');


@font-face{font-family:'OpenSans';font-style:normal;font-weight:300;src:local('OpenSans Light'),local('OpenSans-Light'),url('./resources/fonts/OpenSans-Light.woff2') format('woff2')}
@font-face{font-family:'OpenSans';font-style:normal;font-weight:normal;src:local('OpenSans Regular'),local('OpenSans-Regular'),url('./resources/fonts/OpenSans-Regular.woff2') format('woff2')}
@font-face{font-family:'OpenSans';font-style:normal;font-weight:bold;src:local('OpenSans Bold'),local('OpenSans-Bold'),url('./resources/fonts/OpenSans-Bold.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:normal;src:local('Montserrat Regular'),local('Montserrat-Regular'),url('./resources/fonts/Montserrat-Regular.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:bold;src:local('Montserrat Bold'),local('Montserrat-Bold'),url('./resources/fonts/Montserrat-Bold.woff2') format('woff2')}


body{
	font-size:16px;
	font-weight:300;
	font-family:'Fira Sans', sans-serif;
	margin:0;
	color:#484855;
	background-color:#e7e9f1
}
.fw{max-width:1024px;margin:0 auto}
h1,h2,.hide{display:none}

/* header */
header{
	background:#2f5387 url(resources/header/paper.jpg);
	background-color:#3f6397;
	margin:0;
	position:relative;
	background-size: cover;
}
header hr{
	width:300px;
	border:none;
	height:1px;
	margin: 40px auto;

	background: -moz-linear-gradient(left, transparent 0%, #ffffff 50%, transparent 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, transparent 0%,#ffffff 50%,transparent 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, transparent 0%,#ffffff 50%,transparent 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#canvas-particles{
	position:absolute;top:0;left:0;width:100%;height:100%
}


#over-canvas{text-align:center}
#logo img{
	width:400px;
	max-width:80%;
	margin-top: 40px;
}



#followme{
	background-color:rgba(0,0,0,.15);
	display:inline-block;
	padding: 12px 20px;
	border-radius: 3px;
	color: white;
	margin-top:30px;
	margin-bottom:40px;
}
.follow{
	display:inline-block;
	border-radius:32px;
	box-shadow:black 0 2px;
	margin: 0 3px;
	transition: background-color .3s, transform .1s;
}
.follow img{
	vertical-align:middle;
	margin: 0;
	display:inline-block;
	width:48px;
	height:48px;
	border-radius:32px;
}
.follow:hover{
	transform: scale(1.35)
}
.follow.twitter{background-color:#3ba3ea}
.follow.twitter:hover{background-color:#55b4f5}
.follow.twitch{background-color:#9244ff}
.follow.twitch:hover{background-color:#a362ff}
.follow.github{background-color:#171516}
.follow.github:hover{background-color:#221f21}
.follow.youtube{background-color:#f70000}
.follow.youtube:hover{background-color:#fc2a2a}
.follow.steam{background-color:#1c455d}
.follow.steam:hover{background-color:#23506a}




#about-me{
	color:white;
	text-shadow:black 0 1px;
	font-size:19px;
	line-height:2;
}



/* content */
h3{
	font-family: 'Montserrat', sans-serif;
	font-size:150%;
	margin:0 0 30px;
}
h3 span{
	border-bottom:3px solid #484855;
}

.content{padding:30px 0}
.content.alt{background-color:#d9dbe4}
.padding{
	padding: 16px;
	line-height:1.4;
}
.description{
	font-size:85%;
	color:#666;
	margin-top:6px;
}

.grid-cell{
	text-decoration:none;
	color:#333;
	background-color:white;
	display:inline-block;
	vertical-align:top;
	/* float:left; */
	border-radius: 4px;
	transition:all .2s;
	box-sizing:border-box;
}
.grid-cell:hover{
	transform:scale(1.05,1.05);
	box-shadow: #a6a8b4 0 0 12px;
	z-index:8000;
}
.grid-cell img{
	display:block;
	width:100%;
	transition:opacity .15s;
	border-radius: 4px 4px 0 0;
}
.grid-cell:hover img{opacity:.9}


/* simple Foundation alike grid system */
.row:before,.row:after{display:table;content:''}
.row:after{clear:both}
.columns{min-width:1px;float:left;position:relative;box-sizing:border-box}
.row .columns:last-child{float:right}
.row .columns.end{float:left}
.row.collapse{margin:0;max-width:none;width:auto}
.row.collapse .columns{padding:0 !important}
.clearfix:before,.clearfix:after{display:table;content:' '}
.clearfix{clear:both}
.columns.one{width:8.33333%}.columns.two{width:16.66667%}.columns.three{width:25%}.columns.four{width:33.33333%}.columns.five{width:41.66667%}.columns.six{width:50%}.columns.seven{width:58.33333%}.columns.eight{width:66.66667%}.columns.nine{width:75%}.columns.columns.ten{width:83.33333%}.columns.eleven{width:91.66667%}.columns.twelve{width:100%}
/* SMALL */
@media only screen and (max-width:641px){
	.columns.small-1{width:8.33333% !important}
	.columns.small-2{width:16.66667% !important}
	.columns.small-3{width:25% !important}
	.columns.small-4{width:33.33333% !important}
	.columns.small-5{width:41.66667% !important}
	.columns.small-6{width:50% !important}
	.columns.small-7{width:58.33333% !important}
	.columns.small-8{width:66.66667% !important}
	.columns.small-9{width:75% !important}
	.columns.small-10{width:83.33333% !important}
	.columns.small-11{width:91.66667% !important}
	.columns.small-12{width:100% !important}
}






#footer{
	font-family:'Montserrat';
	margin:0;
	padding:30px 0;
	font-size:90%;
	text-align:center;
	text-transform:uppercase
}
#footer img{vertical-align:middle}
#footer .clickable:hover{
	cursor:help;
	text-decoration:underline:
}



/* GRID */
@media only screen and (max-width:1281px){
	.fw{
		max-width:90%;
	}
}

@media only screen and (min-width:961px){
	.grid-cell{width:31%}
	.grid-cell:nth-child(3n+2){
		margin-left:3.5%;
		margin-right:3.5%;
		margin-bottom:3.5%;
	}
}

@media only screen and (max-width:961px){
	.grid-cell{
		width:48%;
		margin-bottom:4%;
	}
	.grid-cell:nth-child(2n+1){
		margin-right:2%;
	}
	.grid-cell:nth-child(2n){
		margin-left:2%;
	}
}

@media only screen and (max-width:481px){
	.grid-cell{
		width:100%;
		margin-left:0%;
		margin-right:0%;
		margin-bottom:20px;
	}
	.grid-cell:nth-child(2n+1){
		margin-right:auto;
	}
	.grid-cell:nth-child(2n){
		margin-left:auto;
	}
}


















/* EASTER EGG */
@keyframes easteregg-musicnote{
	0% {top:24px;left:48px;}
	25% {left:64px;}
	50% {left:48px;}
	75% {left:64px;}
	100% {top:0px;left:48px;}
}
#easter-egg{
	/*background-color:red;*/
	position:fixed;
	bottom:8px;
	left:50%;
	margin-left:-72px;
	width:144px;
	height:144px;
	display:none;
}
.instrument,#link,#musicnote{
	width:32px;
	height:32px;
	position:absolute;
	transition:all 1s ease-out;
	image-rendering:optimizeSpeed;
	image-rendering:-moz-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	image-rendering:optimize-contrast;
	image-rendering:pixelated;
	-ms-interpolation-mode:nearest-neighbor;
}
#musicnote{top:24px;left:56px;animation: easteregg-musicnote 3s infinite;z-index:4000;}
#link{top:56px;left:56px}
.instrument{top:200px;left:200px;}
#instrument0{transition-delay:11s}
#instrument1{transition-delay:11.25s}
#instrument2{transition-delay:11.5s}
#instrument3{transition-delay:11.75s}
#instrument4{transition-delay:12s}
#instrument5{transition-delay:12.25s}
#instrument6{transition-delay:12.5s}
#instrument7{transition-delay:12.75s}

#easter-egg.active #instrument0{top:0px;left:32px}
#easter-egg.active #instrument1{top:32px;left:0px}
#easter-egg.active #instrument2{top:80px;left:0px}
#easter-egg.active #instrument3{top:112px;left:32px}
#easter-egg.active #instrument4{top:0px;left:80px}
#easter-egg.active #instrument5{top:32px;left:112px}
#easter-egg.active #instrument6{top:80px;left:112px}
#easter-egg.active #instrument7{top:112px;left:80px}