:root {
	/* Light palette generated with coolors.co:
	 *
	 * - #0A0908
	 * - #2D82B7
	 * - #5E8C61
	 * - #F3DFBF
	 * - #796465
	 */
	--backgroundColor: #F3DFBF;
	--textColor: #796465;
	--headerColor: #5E8C61;
	--linkColor: #2D82B7;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Dark palette generated with coolors.co:
		 *
		 * - #111111
		 * - #6969B3
		 * - #8C7A6B
		 * - #C57B57
		 * - #F6F7EB
		 */
		--backgroundColor: #111111;
		--textColor: #888;
		--headerColor: #C57B57;
		--linkColor: #8C7A6B;
	}
}

:root {
	background-color: var(--backgroundColor);
	color: var(--textColor);
}

p {
	text-align: justify;
	text-justify: inter-word;
}

a {
	color: var(--linkColor);
}

h2 a {
	text-decoration: none;
	color: var(--headerColor);
}

h1, h2, h3 {
	color: var(--headerColor);
}

.story_nav_menu {
	justify-content: center;
	display: flex;
}

/* https://stackoverflow.com/questions/47286123/different-css-margins-for-mobile-desktop-without-multiple-block-content */

/* Tablets, landscape iPad, lo-res laptops and desktops */
@media screen and (min-width: 801px) {
	body{
		margin-left: 10%;
		margin-right: 10%;
	}
}

/* From big landscape tablets onwards */
@media screen and (min-width: 1025px) {
	body{
		margin-left: 20%;
		margin-right: 20%;
	}
}