body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
}

#map {
	width: 100%;
	height: 100%;
	background-color: gray;

	margin: 0;
	padding: 0;
}

#commentary {
	z-index: 1;

	position: absolute;
	top: 10%;
	right: 10%;

	width: 25em;
	min-height: 5em;
	max-height: 90%;

	padding-right: 30px;

	background-color: rgba(0,0,0,.8);
	box-shadow: 2px 2px 5px rgba(30,30,30,.9);
}

#commentary h2 {
	margin-left: .75em;
	margin-top: .5em;

	color: rgb(250,80,80);
}

#commentary p {
	margin: 1em;

	color: rgb(250,250,250);
}

#commentary p:first-of-type {
	margin-top: 0;
}

#commentary img {
	max-height: 70vh;
	max-width: 100%;

	margin-top: 1em;
}

#next {
	position: absolute;

	right: .5em;
	bottom: 1em;

	border-left: 24px solid rgb(250,80,80);
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
}

#next:hover {
	border-left-color: rgb(255,30,30);
	cursor: pointer;
}

/* for small devices */
@media (max-width: 800px) {
	#commentary {
		width: 90%;
		top: 1em;
		left: 5%;

		padding: 0;
	}

	#commentary p {
		margin-right: 5em;
	}

	#next {
		border-left: 40px solid rgb(250,80,80);
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;

		right: 1em;
	}

	img {
		display: block;
	}
}