@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url('Poppins-Medium.ttf') format('truetype');
}

html, body{
	width: 100%;
	height: 100%;
}
body{
	font-family: 'Poppins';
	margin: 0;
	background: #222;
	position:relative;
}
#stage{
	background: #000;
	width:960px; height:540px;
	position:absolute;
	margin:auto;
	top:0; left:0; right:0; bottom:0;
	cursor: none;
}
.overlay{

	display: none;

	text-align: center;
	color: #fff;
	letter-spacing: 1px;

	width:500px; height:170px;

	position:absolute;
	margin:auto;
	top:0; left:0; right:0; bottom:0;

}
.overlay > div:nth-child(1){
	font-size: 100px;
	line-height: 100px;
}
.overlay > div:nth-child(2){
	font-size: 20px;
}
#modal_shade{
	display: none;
	background: rgba(0,0,0,0.8);
	width:960px; height:540px;
	position:absolute;
	margin:auto;
	top:0; left:0; right:0; bottom:0;
	cursor: pointer;
}
#paused{
	cursor: pointer;
}

/* The game was authored for a fixed 960x540 embed (itch.io's own iframe),
   so #stage/#modal_shade/.overlay are all hardcoded to that pixel size.
   Our site embeds it in a fluid-width 16:9 container instead, so without
   this it only ever shows/clips the native top-left 960x540 px of
   whatever the container's actual rendered size is.

   Re-centering with a scale() added to the original inset:0 + margin:auto
   rules above doesn't work: once the (unscaled) box is wider than its
   container, "left:0; right:0; width:960px; margin:auto" is
   over-constrained, and the margin-resolution algorithm collapses
   margin-left to 0 instead of splitting it evenly and negative like
   margin-top/bottom do -- so the box actually sits flush against the left
   edge (not centered) before the transform ever runs, and scaling around
   its own off-center middle just shifts the clipped/cropped result
   sideways instead of centering it.

   top/left 50% + translate(-50%,-50%) sidesteps that entirely: only one
   offset per axis is set (no left+width+right three-way conflict), so
   there's nothing to over-constrain, and the translate undoes exactly
   half the box's own (unscaled) size on each axis. Since our container is
   always exactly 16:9 (matches 960:540), one uniform scale factor fits
   both dimensions. */
#stage, #modal_shade, .overlay{
	top: 50%; left: 50%; right: auto; bottom: auto; margin: 0;
}
#stage, #modal_shade{
	transform: translate(-50%, -50%) scale(calc(100vw / 960px));
}
.overlay{
	transform: translate(-50%, -50%);
}