:root {
	color-scheme:		light dark;
}

body {
	font-size:			24px;
	font-family:		"Georgia", serif;
	color:				light-dark(#000000, #E0E0E0);
	background-color:	light-dark(#FFFFFF, #1E1E1E);
	padding:			0;
	margin:				0;
}

h1.heading {
	font-size:			2.5em;
	text-align:			center;
	text-shadow:		4px 4px black;
	margin:				0;
	height:				28rem;
	color:				#E0E0E0;
	background-image:	url("images/background.jpg");
	background-size:	cover;
	display:			grid;
	vertical-align:		middle;
	align-items:		center;
}

h1 {
	font-size:			2em;
	text-align:			center;
	margin-top:			4rem;
	margin-bottom:		4rem;
}

h2 {
	font-size:			1.5em;
	text-align:			left;
	margin-top:			2rem;
	margin-bottom:		2rem;
}

main {
	max-width:			55ch;
	margin-left:		auto;
	margin-right:		auto;
	padding-left:		0.5em;
	padding-right:		0.5em;
}

.center {
	text-align:			center;
}

nav {
	background-color:	#333;
	overflow:			hidden;
	display:			flex;
	flex-wrap: 			wrap;
	justify-content:	center;
}

nav a {
	float:				left;
	font-size:			16px;
	color:				white;
	text-align:			center;
	padding:			14px 16px;
	text-decoration:	none;
}

nav a:hover {
	background-color:	#ddd;
	color:				black;
}

nav a[href="red-pages.html"]:hover {
	background-color:	darkred !important;
	color:				white !important;
}

#red-pages-btn:hover {
    background-color:	darkred;
    color:				white;
}

hr {
	border:				none;
	word-spacing:		1em;
	margin-top:			1.5em;
	margin-bottom:		1.5em;
}

hr::before {
	color:				light-dark(#000000, #E0E0E0);
	content:			'* * *';
	display:			block;
	text-align:			center;
}

footer {
	text-align:			center;
	padding:			3px;
	color:				white;
	margin-bottom:		1em;
}

socialbar {
	display:			flex;
	justify-content:	center;
}

socialbar a {
	margin:				0.5em;
}

socialbar a img:hover {
	opacity:			0.5;
}

td {
	padding:			0.5em;
	text-align:			center;
}

img {
	display: block; 
	margin: auto;
}

.flex-table {
  width: 100%;
  display: block !important;
  flex-direction: column;
  border-collapse: collapse;
}

.flex-table thead,
.flex-table tbody,
.flex-table tr {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.flex-table img {
  padding-bottom: 0.5em;
  width: 10em;
  height: 15em;
}

.flex-table td {
  flex: 1 0 30%;
  padding: 0px;
  padding-bottom: 1em;
  margin: 0px;
  box-sizing: border-box;
}

.responsive-image {
    width: 100%;
	max-width: 340px;
	max-height: 100vh;
	margin: auto;
    height: auto;
    display: block;
}