@font-face
{
	font-family: "neoletters";
	src: url('./neoletters.woff');
	-webkit-font-smoothing: none;
	-moz-font-smoothing: none;
	-osx-font-smoothing: none;
	font-smoothing: none;
}

html
{
	height: 100%;
	width: 100%;
}

body
{
	color: #DDD;
	font-family: "neoletters", consolas, 'lucidia console', monospace;
	font-size: 16px;
	text-align: center;

	user-select: none;
	-mox-user-select: none;
	-webkit-user-select: none;
}

.version
{
	position: absolute;
	top: 1px;
	left: 1px;

	font-family: consolas, 'lucidia console', arial;
}

h1
{
	font-size: 24px;
}

h2
{
	font-size: 20px;
}

.controls
{
	font-family: "neoletters", consolas, 'lucidia console', monospace;

	position: fixed;
	top: 0px;
	left: 0px;

	height: calc(100% - 32px);
	width: calc(100% - 32px);

	border-style: solid;
	border-color: #DDD;
	border-width: 16px;
	margin: 0px;
	padding: 0px;

	background-color: #000;

	z-index: 2;
}

.start
{
	animation: blinker 4s ease-in infinite;
	opacity: 0;
	display: none;
}

.mapSelector
{
	position: absolute;
	bottom: 3px;
	left: 3px;
	display: none;
}

.optionsButton
{
	position: fixed;
	bottom: 19px;
	right: 19px;
	z-index: 3;
}

select
{
	color: #DDD;
	background-color: #222;
}

button
{
	color: #DDD;
	background-color: #222;
}

@keyframes blinker
{
	0%
	{
		opacity: 0;
	}

	25%
	{
		opacity: 100;
	}

	80%
	{
		opacity: 0;
	}

	100%
	{
		opacity: 0;
	}
}

.floatingBoxClickBlock
{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	display: block;

	z-index: 3;
}

.floatingBox
{
	position: fixed;
	width: 700px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -350px;

	border-style: solid;
	border-color: #DDD;
	border-width: 16px;
	background-color: #000;

	display: none;

	z-index: 4;
}

#focusGrabber
{
	position: fixed;
	bottom: -100%;
}

@media (max-width: 1450px)
{
	.pageContainer
	{
		background-color: #000;
		position: fixed;
		top: 0px;
		left: 0px;
		
		height: 100%;
		width: 100%;
		z-index: 0;

		text-align: left;
	}

	.gameContainer
	{
		display: inline-block;

		/*height: 360px;*/

		padding-top: 0px;
		line-height: 0px;
		margin-left: 315px;
		margin-right: auto;
		margin-top: 10px;

	}

	.gameLog
	{
		display: block;

		padding: 0px;
		border-width: 0px;

		width: 800px;
		height: calc(100% - 450px);
		overflow-y: scroll;
		overflow-x: hidden;
		overflow-wrap: normal;

		vertical-align: bottom;

		margin-top: 15px;
		margin-bottom: 10px;
		margin-left: 315px;
		margin-right: auto;

		white-space: pre;
		text-align: left;

		user-select: text;
		-mox-user-select: text;
		-webkit-user-select: text;
	}

	.stats
	{
		position: absolute;
		top: 7px;
		right: 7px;
		margin: 3px;

		font-size: 13px;

		text-align: center;
	}
}

@media (min-width: 1451px)
{
	.pageContainer
	{
		background-color: #000;
		position: fixed;
		top: 0px;
		left: 0px;
		
		height: 100%;
		width: 100%;
		z-index: 0;

		text-align: center;
	}

	.gameContainer
	{
		display: inline-block;

		/*height: 360px;*/

		padding-top: 0px;
		line-height: 0px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
	}

	.stats
	{
		position: absolute;
		top: 7px;
		right: 7px;
		margin: 3px;

		width: 250px;

		text-align: center;
	}

	.gameLog
	{
		display: block;

		padding: 0px;
		border-width: 0px;

		width: 800px;
		height: calc(100% - 450px);
		overflow-y: scroll;
		overflow-x: hidden;
		overflow-wrap: break-word;

		vertical-align: bottom;

		margin-top: 15px;
		margin-bottom: 10px;
		margin-left: auto;
		margin-right: auto;

		white-space: pre;
		text-align: left;

		user-select: text;
		-mox-user-select: text;
		-webkit-user-select: text;
	}
}

.gameLogTextEntrance
{
	animation-name: slideDown;
	animation-duration: 0.2s;
	animation-timing-function: linear;
}

@keyframes slideDown
{
	0%
	{
		/*opacity: 0;*/
		transform: translateY(-20px);
	}

	75%
	{
		transform: translateY(0px);
		/*opacity: 50;*/
	}

	100%
	{
		opacity: 100;
	}
}

.screenShake
{
	animation-name: shaking;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: 2;
	animation-direction: alternate;
}

@keyframes shaking
{
	0%
	{
		transform: translate(5px, -15px);
	}
	10%
	{
		transform: translate(-10px, 5px);
	}
	20%
	{
		transform: translate(-10px, -5px);
	}
	30%
	{
		transform: translate(5px, -5px);
	}
	40%
	{
		transform: translate(-5px, 10px);
	}
	50%
	{
		transform: translate(10px, -15px);
	}
	60%
	{
		transform: translate(-10px, 5px);
	}
	70%
	{
		transform: translate(5px, 1px);
	}
	80%
	{
		transform: translate(-10px, 10px);
	}
	90%
	{
		transform: translate(15px, -15px);
	}
	100%
	{
		transform: translate(-5px, 10px);
	}
}

.fadeAway
{
	animation-name: fadeout;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes fadeout
{
	0%
	{
		color: #DDD;
		border-color: #DDD;
		background-color: #000;
	}
	50%
	{
		color: rgba(0, 0, 0, 0.0);
		border-color: rgba(0, 0, 0, 0.0);
		background-color: #000;
	}
	100%
	{
		color: rgba(0, 0, 0, 0.0);
		border-color: rgba(0, 0, 0, 0.0);
		background-color: rgba(0, 0, 0, 0.0);
	}
}

@keyframes treasureGlow
{
	0%
	{
		background: linear-gradient(to bottom, #fefcea 0%, #f1da36 100%);
	}

	50%
	{
		background: linear-gradient(to bottom, #f1da36 0%, #fefcea 100%);
	}

	100%
	{
		background: linear-gradient(to bottom, #fefcea 0%, #f1da36 100%);
	}
}

@keyframes hazardBackground
{
	0%
	{
		background-color: #000;
		color: inherit;
	}
	1%
	{
		color: rgba(0, 0, 0, 0.0);
	}

	50%
	{
		color: rgba(0, 0, 0, 0.0);
	}
	51%
	{
		color: inherit;
	}

	100%
	{
		background-color: red;
	}
}

.inventoryContainer
{
	position: absolute;
	top: 7px;
	left: 7px;
	margin: 3px;

	width: 300px;
	height: calc(100% - 20px);
	overflow-y: scroll;
	overflow-x: hidden;

	text-align: left;
}

div.inventoryItem
{
	background-color: #DDD;
	color: #222;

	height: 24px;
	line-height: 24px;
	overflow: hidden;
	padding: 2px;
	padding-top: 4px;
	padding-bottom: 2px;
	padding-right: 0px;
	margin: 1px;
	margin-right: 0px;

	transition-property: height;
	transition-duration: 0.1s;
	transition-timing-function: ease;

	position: relative;
}

div.inventoryItem:hover
{
	height: initial;
}

div.compactInventoryItem
{
	background-color: #DDD;
	color: #222;

	height: 16px;
	font-size: 12px;
	line-height: 16px;
	overflow: hidden;
	padding: 1px;
	padding-right: 0px;
	margin: 1px;
	margin-right: 0px;

	transition-property: height;
	transition-duration: 0.1s;
	transition-timing-function: ease;

	position: relative;
}

div.compactInventoryItem:hover
{
	height: initial;
}


button.inventoryItem
{
	background-color: #DDD;
	color: #222;

	height: 20px;
	border-left-width: 2px;
	border-right-width: 2px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 2px;
	padding-right: 2px;

	font-family: inherit;
	font-size: 16px;
}

button.compactInventoryItem
{
	background-color: #DDD;
	color: #222;

	height: 16px;
	font-size: 12px;
	font-family: inherit;
}

img.inventoryTick
{
	width: 16px;

	position: absolute;
	top: 6px;
	right: 6px;
}

img.statusIcon
{
	position: relative;
	top: 5px;

	width: 32px;
}

#statusIndicators
{
	font-size: 28px;
	line-height: 32px;
}

.gameSquare
{
	/*height: 15px;*/
	width: 10px;

	line-height: 17px;

	/*overflow: hidden;*/

	padding: 0px;
	margin: 0px;
	border-width: 0px;

	display: inline-block;
}

.bossMonster
{
	color: red;
}

.treasureGlow
{
	animation-name: treasureGlow;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.hazardBackground
{
	animation-name: hazardBackground;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}