@font-face {
	font-family: 'M+ 1p Black';
	src: url(/fonts/mplus-1p-black.ttf);
}

@font-face {
	font-family: 'M+ 1p Black';
	font-style: bold;
	src: url(/fonts/mplus-1c-bold.ttf);
}

@font-face {
	font-family: M Ying Hei HK;
	src: url(/fonts/MYingHeiHK-W7.otf);
}

@font-face {
	font-family: M Ying Hei PRC;
	src: url(/fonts/MYingHeiPRC-W7.otf);
}

@font-face {
	font-family: Tazugane Gothic;
	src: url(/fonts/TAZUGANEGOTHICSTDN-BOLD.otf);
}

html, body {
	width: 100vw;
	height: 100vh;

	margin: 0;
	padding: 0;

	font-size: 1vh;

	/* overflow: hidden; */

	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
}

body {
	background-color: black !important;

	background-image: url('//cdn.housamo.xyz/housamo/builtin/pattern.png');
	background-repeat: repeat;
}

.background > img {
	z-index: -10;
	position: absolute;
	width: 100%;
	height: 100%;
	/* filter: blur(4px); */
}

.load-screen {
	position: relative;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(0,0,0,0.4);
}
.loading-text {
	position: absolute;
	width: 07.47%;
	height: 03.89%;
	left: 91%;
	top: 96%;
	font-size: 3rem;
	color: #FFFFFF;
	text-align: center;
}
.loading-arrow {
	position: absolute;
	width: 03.17%;
	height: 03.28%;
	left: 93.49%;
	top: 92.50%;
	transform: rotate(180deg);
}
.loading-circle {
	position: absolute;
	width: 25rem;
	height: 25rem;

	top: 50%;
	left: 50%;

	margin: -12.5rem 0 0 -12.5rem;
}

.load-screen > img {
	z-index: 10;
}

.loading-percentage {
	text-align: center;
	font-size: 4rem;

	white-space: pre-wrap;

	color: white;
	text-shadow:
	0.2rem 0.2rem 0 #000,
	-0.2rem -0.2rem 0 #000,
	0.2rem -0.2rem 0 #000,
	-0.2rem 0.2rem 0 #000,
	0.2rem 0.2rem 0 #000;

	padding-top: 47rem;
}

#canvas-area {
	position: relative;

	height: inherit;

	margin: 0% auto 0% auto;

	font-family: 'M+ 1p Black';
	color: white;
	background-color: black !important;

	z-index: 0;

	overflow: hidden;
}

#canvas-area .spacer {
	position: absolute;
	height: 100%;

	z-index: -1;
}

#canvas-area .popup-window {
	display: none;
	position: absolute;

	width: 60%;
	height: 60%;

	top: 50%;
	left: 50%;

	margin: -31rem 0 0 -45rem;
	padding: 2%;

	background: url('//cdn.housamo.xyz/utage/img/simpleWindow.png') no-repeat center center;
	background-size: 100% 100%;

	overflow: auto;
	word-wrap: break-word;
	text-align: center;

	z-index: 10;
}

#canvas-area .popup-window .win-text, input[type=text] {
	font-family: 'M+ 1p Black';
	color: white;

	font-size: 3rem;

	margin-bottom: 1em;

	text-align: center;
	white-space: pre-wrap;
	display: inline-block;
}

#canvas-area .popup-window > .buttons > img, .popup-window-button {
	width: 30rem;
	height: 12rem;
	display: inline-block;
	font-size: 4rem;
	line-height: 300%;
	text-align: center;
	vertical-align: middle;
	margin-left: 2%;
	margin-right: 2%;
}
.text {
	-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}
.text-shadowed {
	text-shadow: 0.1rem 0.1rem 0 #000, -0.1rem -0.1rem 0 #000, 0.1rem -0.1rem 0 #000, -0.1rem 0.1rem 0 #000, 0.1rem 0.1rem 0 #000
}
.text-stroked {
	-webkit-text-stroke-width: 0.2rem;
	-webkit-text-stroke-color: black;
	text-shadow: 0.1rem 0.1rem 0 #000, -0.1rem -0.1rem 0 #000, 0.1rem -0.1rem 0 #000, -0.1rem 0.1rem 0 #000, 0.1rem 0.1rem 0 #000
}

::-webkit-scrollbar {
	width: 0px;
	background: transparent;
}

.scene > div, .scene > img {
	position: absolute;
/*	z-index: 1; */
}
.scene > div[class*="sprite"], .scene > img[class*="sprite"] {
	width: 100%;
	height: 100%;
}