@font-face {
	font-family: "Walter Turncoat";
	font-display: block;
	src: url("WalterTurncoat-Regular.ttf") format("truetype");
}

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: black;
	color: white;
	font-family: serif;
	font-size: 1.2rem;
	padding: 0.5rem;
}
.title {
	position: relative;
	text-align: center;
	font-size: 2.0rem;
	font-weight: bold;
	margin-top: 2rem;
	margin-bottom: 1rem;
	#title-trash {
		z-index: 1;
		position: relative;
		display: inline-block;
	}
}
#finished-text {
	font-family: serif;
	font-size: 2.0rem;
	font-weight: bold;
}

.game {
	position: relative;
	margin-block: 1rem;
}
.horizontal-layout {
	display: grid;
	grid-template-columns: 3fr 1fr;
	column-gap: 1rem;
}
.collection {
	color: white;
}
.game-window {
	position: relative;
	width: 800px;
	height: 600px;
	margin-inline: auto;
	font-family: "Walter Turncoat", sans-serif;
}

.click-to-start {
	position: relative;
	background-color: rgb(0 0 0 / 0.8);
	color: white;
	font-weight: bold;
	font-size: 1.5em;
	cursor: pointer;
	width: 800px;
	height: 600px;
	align-content: center;
	text-align: center;
	z-index: 10;
}

#trash-collected {
	position: absolute;
	bottom: 0px;
	left: 8px;
	font-size: 1.1em;
	text-shadow: -1px 1px 0px black, 1px 1px 0px black, 0px 1px 2px black;
	user-select: none;
}

.title-screen {
	background-image: url('CityBackground.png');
}

.house-level {
	background-image: url('HouseBackground.png');
}

.river-level {
	background-image: url('RiverBackground.png');
	background-size: 100%;
	image-rendering: pixelated;
}

.true-ending {
	background-image: url('SpaceBackground.png');
}

/* Preload backgrounds for levels */
body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:url('CityBackground.png') url('HouseBackground.png') url('RiverBackground.png') url('SpaceBackground.png');
}

.entity {
	position: absolute;
	cursor: default;
	user-select: none;

	img& {
		display: block;
		image-rendering: pixelated;
	}
	span& {
		display: inline-block;
	}

	&.moveable {
		cursor: pointer;
	}

	&.glide {
		transition: top ease-out 0.1s, left ease-out 0.1s;
	}

	&.wall {
		background-color: red;
		z-index: 3;
		visibility: hidden;
	}

	&.target {
		background-color: green;
		z-index: 3;
		visibility: hidden;
	}
}

.debug {
	margin-top: 1rem;
	visibility: hidden;
}

/*
LEVELS
*/

section {
	display: none;
}

@keyframes vibrate {
    0% { transform: translateX(-2px); }
    1% { transform: translateX(0px); }
    5% { transform: translateX(1px); }
    6% { transform: translateX(0px); }
    10% { transform: translateX(-1px); }
    11% { transform: translateX(0px); }
    15% { transform: translateX(2px); }
    16% { transform: translateX(0px); }
    20% { transform: translateX(2px); }
    21% { transform: translateX(0px); }
    25% { transform: translateX(-1px); }
    26% { transform: translateX(0px); }
    30% { transform: translateX(2px); }
    31% { transform: translateX(0px); }
    35% { transform: translateX(1px); }
    36% { transform: translateX(0px); }
    40% { transform: translateX(2px); }
    41% { transform: translateX(0px); }
    45% { transform: translateX(-2px); }
    46% { transform: translateX(0px); }
    50% { transform: translateX(-1px); }
    51% { transform: translateX(0px); }
    55% { transform: translateX(-2px); }
    56% { transform: translateX(0px); }
    60% { transform: translateX(-2px); }
    61% { transform: translateX(0px); }
    65% { transform: translateX(-2px); }
    66% { transform: translateX(0px); }
    70% { transform: translateX(2px); }
    71% { transform: translateX(0px); }
    75% { transform: translateX(1px); }
    76% { transform: translateX(0px); }
    80% { transform: translateX(-1px); }
    81% { transform: translateX(0px); }
    85% { transform: translateX(2px); }
    86% { transform: translateX(0px); }
    90% { transform: translateX(-1px); }
    91% { transform: translateX(0px); }
    95% { transform: translateX(2px); }
    96% { transform: translateX(0px); }
}

@keyframes takeoff {
	from { transform: translateY(0px); }
	to { transform: translateY(-800px); }
}

#levelNeutralEnding, #levelTrueEnding {
	font-size: 1.2em;

	button {
		font-family: "Walter Turncoat";
		font-size: 1.25em;
		padding: 0.25em 0.75em;
	}
}