body {
	background-color: var(--nav-bg)
}


div.stanza {
	margin-top: 2em;
	margin-bottom: 2em;
}

p.line {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

a.change_poem_language:hover {
	cursor: pointer;
}

@media only screen and (max-width: 800px) {

	div.stanza {
		margin-left: 0em;
		margin-right: 0em;
	}

	p.line {
		margin-left: 0em;
		margin-right: 0em;
	}

	#poem_text, #poem_notes {
		--width: calc(var(--article-width) / 10 * 9);
		width: var(--width);
		margin-left: calc((var(--article-width) - var(--width))/2);
	}

	#poem_video {
		--width: calc(var(--article-width) / 10 * 9);
		--height: calc(var(--width) / 16 * 9);
		width: var(--width);
		height: var(--height);
		margin-left: calc((var(--article-width) - var(--width))/2);
	}

	#languages_table {
		--width: calc(var(--article-width) / 10 * 9);
		width: var(--width);

		border-top: solid 2pt var(--link-hover-color);
		border-bottom: solid 2pt var(--link-hover-color);

		margin-left: calc((var(--article-width) - var(--width))/2);
	}

	#languages_table td {
		max-width: calc(var(--article-width) / 5 * 4);
		text-align: center;
	}
}

@media only screen and (min-width: 801px) {

	div.stanza {
		margin-left: 2em;
		margin-right: 2em;
	}

	p.line {
		margin-left: 0.5em;
		margin-right: 0.5em;
	}

	#poem_text, #poem_notes {
		--width: calc(var(--article-width) / 5 * 4);
		width: var(--width);
		margin-left: calc((var(--article-width) - var(--width))/2);
	}

	#poem_video {
		--width: calc(var(--article-width) / 5 * 4);
		--height: calc(var(--width) / 16 * 9);
		width: var(--width);
		height: var(--height);
		margin-left: calc((var(--article-width) - var(--width))/2);
	}

	#languages_table {
		--width: calc(var(--article-width) / 5 * 4);
		width: var(--width);

		border-top: solid 2pt var(--link-hover-color);
		border-bottom: solid 2pt var(--link-hover-color);

		margin-left: calc((var(--article-width) - var(--width))/2);
	}

	#languages_table td {
		max-width: calc(var(--article-width) / 5 * 4);
		text-align: center;
	}
}