:root
{
	--worldPlotSize: 64px;
}

@font-face {
	font-family: product-sans;
	src: url('../fonts/Product Sans Regular.ttf');
}

@font-face {
	font-family: product-sans-bold;
	src: url('../fonts/Product Sans Bold.ttf');
}

html, body
{
	font-family: product-sans;
	padding: 0;
	margin: 0; width:
}

#ui-overlay
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000;
}

#ui-overlay header
{
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.35);
	width: 100vw;
	border-bottom: 2px dashed white;
	box-sizing: border-box;
	opacity: .75;
}

#ui-overlay h1
{
	padding: 0;
	margin: 0;
	font-family: product-sans-bold;
	color: white;
	filter: drop-shadow(0px 2px rgba(0,0,0,.15));
	text-align: center;
}

#world
{
	width: 100vw;
	height: 100vh;
	background-color: rgb(139, 195, 74);
	position: relative;
	cursor: grab;
	overflow: hidden;
}

#world-center-anchor
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: black;
}

.world-plot-anchor
{
	position: absolute;
}

.world-plot
{
	transition: .15s;
	position: relative;
	height: var(--worldPlotSize);
	width: var(--worldPlotSize);
	background-image: url('../images/world_tiles/tile_grass.jpg');
	background-position: center center;
	background-size: var(--worldPlotSize);
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	box-sizing: border-box;
	border: 4px dashed rgba(0,0,0,.05);
}

.world-plot:hover
{
	filter: brightness(1.05) drop-shadow(0px 12px #79A540);
	transform: translateY(-12px);
	border: 4px solid rgba(0,0,0,.1);
	z-index: -100000;
}

.world-plot .plot-building
{
	transition: .15s;
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 20%;
	filter: opacity(70%) drop-shadow(0px 2px 6px rgba(0,0,0,.2));
	pointer-events: none;
}

.world-plot:hover .plot-building
{
	filter: opacity(100%) drop-shadow(0px 2px 6px rgba(0,0,0,.2));
	opacity: 1;
}