@viewport {
	width: device-width;
	zoom: 1;
}
@font-face {
	font-family: "NotoSans";
	font-style: normal;
	font-weight: 400;
	src: url(fonts/NotoSans-Regular.woff2) format('woff2'), url(fonts/NotoSans-Regular.ttf) format('ttf');
}
@font-face {
	font-family: "NotoSans";
	font-weight: 700;
	src: url(fonts/NotoSans-Bold.woff2) format('woff2'), url(fonts/NotoSans-Bold.ttf) format('ttf');
}
@font-face {
	font-family: "NotoSans";
	font-style: italic;
	font-weight: 300;
	src: url(fonts/NotoSans-Italic.woff2) format('woff2'), url(fonts/NotoSans-Italic.ttf) format('ttf');
}
@keyframes stars_start {
	0% {
		transform: rotate3d(0, 0, 1, -60deg);
	} 100% {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

@keyframes stars_loop {
	0% {
		transform: rotate3d(0, 0, 1, 0deg);
	} 100% {
		transform: rotate3d(0, 0, 1, 360deg);
	}
}
@keyframes logo_swing {
	0% {
		transform: rotate3d(0, 0, 1, -2deg);
	} 100% {
		transform: rotate3d(0, 0, 1, 1deg);
	}
}
@keyframes logo_loop {
	0% {
		transform: scale3d(1, 0.95, 1);
	} 100% {
		transform: scale3d(0.9, 1, 1);
	}
}
html {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: radial-gradient(farthest-corner at 50% 50%, #04213f 50%, #012) fixed;
	font-family: NotoSans, Vodafone, Arial, sans-serif;
}
body {
	max-width: 960px;
	margin: 0 16px;
}
a {
	color: #07d;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	color: #048;
}
header {
	margin: 0 0 48px;
	overflow: hidden;
	display: flex;
	flex-direction: column-reverse;
}
h1 {
	overflow: hidden;
	font-size: 0;
	text-indent: -999px;
	animation: 5s infinite ease-in-out alternate logo_swing;
}
header>h1::before {
	content: '';
	height: 384px;
	display: block;
	background: url('images/logo.svg') 50% 50% / contain no-repeat;
	animation: 1.5s infinite ease-in-out alternate logo_loop;
}
#bluenoise {
	width: 88px;
	height: 32px;
	margin: -16px -44px;
	overflow: hidden;
	position: absolute;
	left: 48px;
	top: 50%;
	display: inline-block;
	background: url('images/BlueNoise.png');
	text-indent: -999px;
}
header>nav>ul {
	margin: 0;
	padding: 8px 0;
	display: flex;
	list-style: none;
	float: right;
}
header>nav>ul>li>a {
	width: 24px;
	height: 24px;
	margin: 4px;
	border-radius: 3px;
	overflow: hidden;
	display: inline-block;
	background: url('images/links.svg');
	font-size: 0;
	text-indent: -999px;
	opacity: 0.9;
}
header>nav>ul>li>a:hover {
	opacity: 1;
}
header>nav>ul>li>a.youtube	{ background-position: -24px 0; }
header>nav>ul>li>a.facebook	{ background-position: -48px 0; }
header>nav>ul>li>a.twitter	{ background-position: -72px 0; }
header>nav>ul>li>a.discord	{ background-position: -96px 0; }
header>nav>ul>li>a.steam	{ background-position: -120px 0; }
header>nav>ul>li>a.switch	{ background-position: -144px 0; }
header::before {
	content: '';
	width: 150vw;
	height: 150vw;
	margin: -75vw;
	position: fixed;
	top: 50%;
	left: 50%;
	background: url('images/stars.png');
	transform-origin: 0% 0%;
	transform-origin: 50% 50%;
}
header>* {
	position: relative;
}
section {
	padding: 16px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	background: #eee;
	box-shadow: 0 0 16px #fff;
}
h2 {
	margin: 16px 0 0;
	padding: 0 0 0 32px;
	border-bottom: dashed 1px #04213f;
	font-size: 24px;
	color: #04213f;
	text-transform: uppercase;
}
#main_video {
	width: 100%;
}
video {
	border-radius: 6px;
}
.video {
	min-height: 160px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	background: #000;
	transition: 0.3s;
	cursor: pointer;
}
.video.unloaded::before {
	content: '►';
	width: 80px;
	height: 80px;
	margin: -40px;
	border: solid 2px;
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	background: #000;
	opacity: 0.7;
	font-size: 48px;
	text-align: center;
	text-indent: 8px;
	line-height: 72px;
	color: #fff;
	transition: 0.3s;
}
.video.unloaded:hover::before {
	width: 96px;
	height: 96px;
	margin: -48px;
	background: rgba(0,0,0,0.3);
	opacity: 1;
	line-height: 88px;
}
.video img {
	max-width: 100%;
	display: block;
	transition: 0.3s;
}
.video:hover img {
	max-width: 100%;
	display: block;
	opacity: 0.5;
}
.video.loaded img,
.video.loaded:hover img {
	opacity: 0;
}
.video iframe {
	width: 100%;
	height: 100%;
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.video.active>iframe {
	position: absolute;
	top: 0;
	left: 0;
}
#boss_letter {
	margin: 64px 0;
	padding: 30px 16px 23px 40px;
	position: relative;
	background: #fff url('images/line.svg');
	font-family: monospace;
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	text-align: justify;
	line-height: 24px;
	color: #036;
	hyphens: auto;
	transition: 0.3s;
}
#boss_letter::before {
	content: '';
	height: 100%;
	border-right: solid 2px rgba(192,0,0,0.5);
	position: absolute;
	top: 0;
	left: 40px;
	transition: 0.3s;
}
#boss_letter>p {
	margin: 24px 16px;
	text-indent: 16px;
	transition: 0.3s;
}
#boss_letter>p:nth-last-child(1) {
	padding: 0 0 0 32px;
	text-indent: 0;
}
#boss_letter>p:nth-last-child(1)::after {
	content: '';
	width: 160px;
	height: 64px;
	display: block;
	background: url('images/signature.svg');
	transform: translate(-30px,0);
}
#boss_letter>ul {
	padding: 0 0 0 64px;
}
#description {
	padding: 16px 4px;
	font-size: 18px;
	text-align: justify;
	hyphens: auto;
}
#description::before {
	content: '';
	min-width: 142px;
	min-height: 128px;
	display: block;
	background: url('images/borbopopo.png') 50% 50% no-repeat;
}
/*	Store	*/
.store {
	margin: 16px 0px;
}
.store>a {
	min-height: 96px;
	padding: 8px 32px 8px 128px;
	border-radius: 6px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background: #333;
	color: #fff;
}
.store>a>strong {
	margin: 8px 0;
	padding: 8px 16px;
	border: solid 1px;
	border-radius: 3px;
	text-transform: uppercase;
}
.store>a:hover>strong {
	text-shadow: 0 0 4px #fff;
}
.store>a::before {
	width: 64px;
	height: 64px;
	margin: -32px;
	position: absolute;
	left: 64px;
	top: 50%;
	color: #fff;
	transition: 0.3s;
}
.store>a:hover::before {
	width: 72px;
	height: 72px;
	margin: -36px;
}
#steam>a {
	background: linear-gradient(#111d2e, #051839, #0a1b48, #132e62, #144b7e, #136497, #1387b8);
}
#steam>a::before {
	content: '';
	background: url('images/steam_white.svg') 50% 50% no-repeat;
}
#switch>a {
	background: linear-gradient(#e60012, #88000b);
}
#switch>a::before {
	content: '';
	background: url('images/switch_white.svg') 50% 50% no-repeat;
}
#itch>a {
	background: linear-gradient(#e0c0c0, #c0c0c0);
}
#itch>a::before {
	content: '';
	background: url('images/itch_white.svg') 50% 50% no-repeat;
}
/*	Newsletter	*/
#newsletter {
	margin: 32px 0px;
	padding: 4px 32px;
	border-radius: 8px;
	position: relative;
	background: #fff;
}
#newsletter::before {
	content: '';
	width: 128px;
	height: 128px;
	margin: 16px auto; 
	display: block;
	background: url('images/newsletter.svg') 50% 50% no-repeat;
	transition: 0.3s;
}
#newsletter p {
	font-size: 18px;
	text-align: justify;
}
#newsletter>fieldset {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 3px;
}
#newsletter input[type="text"],
#newsletter input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 6px 16px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	display: block;
	font-size: 24px;
}
#newsletter input[type="submit"] {
	margin: 12px auto;
	padding: 16px 64px;
	border: none;
	border-radius: 4px;
	display: block;
	background: linear-gradient(#7797aa, #1e2436);
	box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 8px rgba(0,64,128,0.2);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: #fff;
}
.gallery {
	margin: 16px 0;
	padding: 12px;
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background: #fff;
	list-style: none;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.1);
}
.gallery>li {
	box-sizing: border-box;
	padding: 4px;
}
.gallery img {
	box-sizing: border-box;
	max-width: 100%;
	border: solid 4px rgba(0,0,0,0);
	border-radius: 10px;
	vertical-align: bottom;
	transition: 0.3s;
}
.gallery a:hover img {
	border: solid 4px #fff;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
	transform: scale(1.02);
}
#presskit {
	margin: 32px 0px 0px
}
#presskit>a {
	min-height: 96px;
	padding: 8px 32px 8px 128px;
	border-radius: 6px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(90deg, #aaa, #ddd);
	font-size: 25px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
}
#presskit>a:hover {
	background: linear-gradient(90deg, #999, #ccc);
}
#presskit>a::before {
	content: '';
	width: 64px;
	height: 64px;
	margin: -32px;
	position: absolute;
	left: 64px;
	top: 50%;
	background: url('images/presskit.svg') 50% 50% no-repeat;
	transition: 0.3s;
}
#presskit>a:hover::before {
	transform: scale(1.2) rotate(-5deg);
}
footer {
	padding: 32px 0 24px;
	position: relative;
	text-align: center;
	color: rgba(255,255,255,0.8);
}
footer a {
	color: #fff;
}
footer a:hover {
	color: #fff;
	text-shadow: 0 0 4px #fff;
}
@media screen and (min-width: 640px) {
	#description {
		height: 160px;
		padding-left: 16px;
		padding-right: 192px;
		position: relative;
		display: table-cell;
		vertical-align: middle;
	}
	#description::before {
		position: absolute;
		top: 50%;
		right: 80px;
		margin: -71px -64px;
	}
	.gallery>li {
		max-width: 50%;
	}
	#boss_letter>p {
		margin: 24px 48px;
	}
	#boss_letter::before {
		left: 80px;
	}
	#boss_letter {
		padding: 30px 0 23px 80px;
	}
	#newsletter {
		padding: 4px 32px 4px 192px;
	}
	#newsletter::before {
		margin: -64px; 
		position: absolute;
		left: 96px;
		top: 50%;
	}
}