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

html {
	font-size: 16px;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	font-family: 'Roboto Mono', monospace;
	background-color: #fff;
}

body {
	width: 100%;
	margin: 0;
	overflow: hidden;
}

.a-text {
	text-decoration: none;
	color: #fff;
}

.a-text span {
	font-size: 1.33em;
	display: inline-block;
	line-height: 0.8em;

	transition: transform 0.15s, opacity 0.15s;
}

.a-img {
	display: inline-block;
	position: relative;
	width: 2em;
	margin: 0 0.5em;
	opacity: 1;

	transition: transform 0.15s, opacity 0.15s;
}

.a-img:hover {
	opacity: 0.6;
	transform: scale(1.5) perspective(1px);
}

.a-text span:hover {
	opacity: 0.6;
	transform: scale(1.25) perspective(1px);
}

.a-img img {
	width: 100%;
}


/*********
LOADER
*********/

#loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	color: #000;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
}

#loader.off {
	opacity: 0;
}

#loader h3 {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}

#progress-bar {
	height: 2em;
	max-width: 0%;
	background-color: #ff004d;
}

/*********
CONTAINER
*********/

.container {
	position: relative;
	width: 90%;
	height: 100vh;
	max-width: 1600px;
	margin: 0 auto;
}


/*****
DESKTOP
*****/

#icons {
	position: absolute;
	top: 1em;
	left: 1.5em;
}

#platforms {
	position: absolute;
	bottom: 2em;
	right: 2em;
}

#platforms .a-img {
	width: 3em;
}

#platforms a svg {
	fill: #fff;
}

#social {
	position: absolute;
	top: 2em;
	right: 2em;
}

#dev {
	position: absolute;
	bottom: 2em;
	left: 2em;
}

#dev .a-img {
	width: 6em;
}



/*****************
******* BG *******
*****************/

#bg {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.bg-img {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: 30vw 50vh;
	background-repeat: no-repeat;
	background-size:  auto 100%;
	background-position: 50% 50%;
}

#bg1 { background-image: url("img/bg1.png"); }
#bg2 { background-image: url("img/bg2.png"); }

#red {
	position: absolute;
	left: 50%;
	width: 100%;
	height: 100%;
	background-color: #ff004d;
	transform-origin: 0vw 50vh;
}

/*****************
******* KV *******
*****************/

#kv {
	position: absolute;
	width: 90%;
	height: 100vh;
	max-width: 1600px;
	left: 50%;
	transform: translateX(-50%);
}

.kv-img {
	position: absolute;
	width: 100%;
	height: 100%;
	
	transform-origin: 30vw 50vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size:  contain;
}


#logo, #logo-in {
	image-rendering: pixelated;
	display: none;
}


#logo { background-image: url("img/logo_full.gif"); }
#logo-in { background-image: url("img/logo_in.gif"); }
#bit { background-image: url("img/bit.png"); }
#scatter { background-image: url("img/scatter.png"); }
#window1 { background-image: url("img/win1.png"); }
#window2 { background-image: url("img/win2.png"); }
#window3 { background-image: url("img/win3.png"); }

#bg1 { transform: scale(0, 0); transition: transform 0.25s ease-out; }
#bg2 { transform: scale(0, 0); transition: transform 0.5s ease-out; }
#red { transform: scale(0, 0); transition: transform 0.3s ease-out; }
#bit { transform: scale(0, 0); transition: transform 0.5s ease-out; }
#scatter { transform: scale(0, 0); transition: transform 0.75s ease-out; }
#window1 { transform: scale(0, 0); transition: transform 0.6s ease-out; }
#window2 { transform: scale(0, 0); transition: transform 0.8s ease-out; }
#window3 { transform: scale(0, 0); transition: transform 0.4s ease-out; }

#bg1.loaded { transform: scale(1, 1); }
#bg2.loaded { transform: scale(1, 1); }
#red.loaded { transform: scale(1, 1); }
#bit.loaded { transform: scale(1, 1); }
#scatter.loaded { transform: scale(1, 1); }
#window1.loaded { transform: scale(1, 1); }
#window2.loaded { transform: scale(1, 1); }
#window3.loaded { transform: scale(1, 1); }



@media (max-aspect-ratio: 2/2) {
	.kv-img, .bg-img, #red { transform-origin: 50vw 70vh; }

	#social, #platforms { right: 1em; }

	#platforms .a-img { width: 2.5em; }
	#dev .a-img { width: 4em; }
	#social .a-img { width: em; }


	.bg-img {
		background-size:  100% auto;
		background-position: 50% 50%;
	}
	
	#red {
		left: 0%;
		bottom: 50%;
	}

	#bg1 { background-image: url("img/bg1_tall.png"); }
	#bg2 { background-image: url("img/bg2_tall.png"); }
	#logo { background-image: url("img/logo_full_tall.gif"); }
	#logo-in { background-image: url("img/logo_in_tall.gif"); }
	#bit { background-image: url("img/bit_tall.png"); }
	#scatter { background-image: url("img/scatter_tall.png"); }
	#window1 { background-image: url("img/win1_tall.png"); }
	#window2 { background-image: url("img/win2_tall.png"); }
	#window3 { background-image: url("img/win3_tall.png"); }

	.container { width: 100%; }

	#platforms a svg { fill: #000; }
}