main {
	position: relative;
	flex: 1;
	min-height: min(36rem, 70vh);
	padding: 1.5rem;
	color: white;
}

.forest-intro {
	position: relative;
	z-index: 1;
	max-width: 42rem;
	margin: 0 auto;
	text-align: center;
	text-shadow: 0 1px 3px black;
}

.forest-intro h1,
.forest-intro p {
	margin-top: 0;
}

.tree-side-button {
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
}

.tree-side-button-left {
	left: 1rem;
}

.tree-side-button-right {
	right: 1rem;
}

.forest-bottom-controls {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	width: max-content;
	max-width: calc(100% - 2rem);
	padding: 0.75rem;
	transform: translateX(-50%);
	border-radius: 0.35rem;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
}

.forest-bottom-controls input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.45rem 0.6rem;
	border: 1px solid #777;
	border-radius: 2px;
}

button,
.btn {
	padding: 0.5rem 0.75rem;
	border: 1px solid #444;
	border-radius: 2px;
	background: #f2f2f2;
	color: #111;
	font: inherit;
	cursor: pointer;
}

button:hover,
.btn:hover {
	background: #dceeff;
}

@media (max-width: 600px) {
	main {
		padding: 1rem;
	}

	.tree-side-button-left {
		left: 0.5rem;
	}

	.tree-side-button-right {
		right: 0.5rem;
	}

	.tree-side-button {
		max-width: 8rem;
		padding: 0.4rem;
		font-size: 0.9rem;
	}
}