body {
	background-color: #000000;
	color: #ffffff;
	font-family: Arial, Helvetica, Nimbus Sans, sans-serif;
	font-size: 100%;
	line-height: 1.4;
	margin: 0;
	text-align: left;
}

p {
	margin: 1.4em 0;
	text-align: justify;
}

div#content {
	margin: 6px 12px;
}

/* Generic classes */

.clear-floats {
	clear: both;
}

div.center {
	margin-left: auto; margin-right: auto;
}

kbd {
	font-weight: bold;
}

p.center, h1.center, h2.center {
	text-align: center !important;
}

div.container {
	background-color: #242424;
	border-radius: 12px;
	box-sizing: border-box;
	padding: 12px;
}

span.e-mail-address {
	font-family: monospace;
}

ul.gap-between-items > li {
	margin-bottom: 1.4em;
}

ul.gap-between-items > li:last-of-type {
	margin-bottom: 0;
}

/* Clearfix to ensure all floating elements fit inside a container */

div.container::after, details::after {
	clear: both;
	content: '';
	display: block;
}

.hidden {
	display: none;
}

.no-line-break {
	margin-bottom: 0;
}

.no-margin-top {
	margin-top: 0;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.no-padding-bottom {
	padding-bottom: 0 !important;
}

/* Header at top of page */

header {
	box-sizing: border-box;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	width: 100%;
	opacity: 100%;
	padding: 12px 6px;
}
header div {
	margin: 0 8px;
}

div#site-logo {
	flex: 0 0 auto;
	text-align: center;
}
div#site-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

div.review-categories {
	display: flex;
	flex-flow: column nowrap;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
}

nav#categories {
	flex: 0 0 auto;
	font-size: 150%;
	line-height: 1.2em;
	text-align: center;
	margin-bottom: 0.25em;
}
div#search-form {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}
input#search {
	min-width: 0;
}

form {
	margin: 0;
}

/* Display the header differently if the browser window is greater than a specified width */

@media screen and (min-width: 1024px) {
	header {
		flex-flow: row nowrap;
	}
}

/* Figure containers for images with optional captions */

figure {
	display: table;
	background-color: #383838;
	border-radius: 12px;
	box-sizing: border-box;
	margin: 0;
	max-width: 100%;
	padding: 12px;
	text-align: center;
}
figure.center { clear: both; margin: 0 auto; }
figure.no-frame { background-color: transparent; padding: 0; }
figure.left-align { float: left; clear: left; margin: 0 12px 12px 0; }
figure.right-align { float: right; clear: right; margin: 0 0 12px 12px; }

figcaption {
	font-size: 90%;
	margin-top: 0.5em;
	max-width: 100%;
}

/* Headings */

h1 {
	font-size: 200%;
	margin: 0;
}

h2 {
	font-size: 175%;
	font-weight: bold;
	margin-top: 1.5em;
}

h2.page-title {
	margin-top: 0; margin-bottom: 0.75em;
	text-align: center;
}

h3 {
	color: #00c0ff;
	font-size: 150%;
	line-height: 1.25;
	margin: 0 0 0.5em 0;
}

h3 + p {
	margin-top: 0;
}

/* Images */

img {
	max-width: 100%;
}

figure img {
	display: block;
	margin-left: auto; margin-right: auto;
	height: auto;
}

/* Links */

a {
	color: #80ffff;
}

/* FAQs in the 'About' page */

details {
	margin-top: 1.4em;
}

details:first-of-type {
	margin-top: 0;
}

details > summary {
	color: #38c8ff;
	font-size: 150%;
	font-weight: bold;
	line-height: 1.25;
	list-style-position: outside;
	margin: 0 0 0.5em 1em;
}

details > p:first-of-type {
	margin-top: 0;
}

details > p:last-of-type {
	margin-bottom: 0;
}

details ul {
	margin-top: 1.4em; margin-bottom: 1.4em;
	text-align: justify;
}


/* Navigation sections at top and bottom of pages */

nav.page-navbar {
	display: flex;
	flex-wrap: nowrap;
	margin: 12px;
	align-items: center;
}

nav.page-navbar > div {
	margin-left: auto; margin-right: auto;
	width: fit-content;
}

nav.page-navbar img {
	display: block;
}

/* 'Previous' and 'Next' icons */

nav.page-navbar > div:first-of-type, nav.page-navbar > div:last-of-type {
	flex: none;
}

nav.page-navbar > div:first-of-type {
	margin-right: 6px;
}

nav.page-navbar > div:last-of-type {
	margin-left: 6px;
}

/* 'Previous' and 'Next' textual descriptions */

nav.page-navbar > div:nth-of-type(2), nav.page-navbar > div:nth-of-type(4) {
	flex: none;
	width: 8rem;
}

nav.page-navbar > div:nth-of-type(2) {
	margin-right: 6px;
	text-align: left;
}

nav.page-navbar > div:nth-of-type(4) {
	margin-left: 6px;
	text-align: right;
}

/* 'Go to page' numbers in centre */

nav.page-navbar > div:nth-of-type(3) {
	flex: 1 0 auto;
	text-align: center;
	width: min-content;
}

nav#page-navbar-top {
	margin-top: 0;
}

/* Hide the 'Previous' and 'Next' textual descriptions in the navigation bar if
   the width of the browser window is too small */

@media screen and (max-width: 599px) {
	nav.page-navbar > div:nth-of-type(2), nav.page-navbar > div:nth-of-type(4) {
		display: none;
	}
}


/* Galleries should include three <div>s; the outermost <div> is centred within
   its containing block, and the innermost <div> has negative margins so that
   flex elements will appear to align with the edges of the outermost <div> */

figure.gallery {
	background-color: #383838;
	border-radius: 12px;
	clear: both;
	display: table;
	margin: 0 auto 0 auto;
	padding: 12px;
}

figure.gallery.no-frame {
	background-color: transparent;
	padding: 0;
}

figure.gallery > div {
	margin: -6px;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: center;
}

figure.gallery figure {
	box-sizing: border-box;
	border-radius: 12px;
	margin: 6px;
	padding: 12px;
	flex-grow: 0; flex-shrink: 0;
	width: 216px;	/* = 192px for thumbnail + 2*12px for padding */
	max-width: 216px;
}

figure.gallery figure.screenshot-thumbnail-container {
	background-color: #484848;
}

figure.gallery.no-frame figure.screenshot-thumbnail-container {
	background-color: #383838;
}

figure.gallery figure.screenshot-thumbnail-container div.screenshot-thumbnail {
	width: 192px; height: 120px;
}
figure.gallery figure.screenshot-thumbnail-container div.screenshot-thumbnail > div {
	width: 192px; height: 120px;
}

/* YouTube video containers */

figure.youtube {
	clear: both;
	margin-left: auto; margin-right: auto;
	width: 800px;
	height: auto;
	max-width: 100%;
}

figure.youtube > div {
	display: block;
	position: relative;
	margin: 0;
	padding-top: 56.25%;
	width: 100%;
}

figure.youtube > div > iframe {
	display: block;
	position: absolute;
	top: 0; left: 0;
	border: none;
	box-sizing: border-box;
	margin-left: auto; margin-right: auto;
	width: 100%;
	height: 100%;
}


/* Navigation bar (alphabet and previous, home and next pages) */

p.categories {
	font-size: 150%;
	line-height: 1.3em;
	margin-top: 12px;
	margin-bottom: 12px;
	text-align: center;
}

p.navigation {
	text-align: center;
}


/* Search results */

div#search-results {
	display: grid;
	align-items: stretch;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, 282px);
	justify-content: center;
}

div.screenshot-thumbnail-container {
	background-color: #242424;
	box-sizing: border-box;
	border-radius: 12px;
	padding: 12px;
	width: 282px;	/* = 256px for thumbnail + 2*12px for padding */
	max-width: 282px;
}

div.screenshot-thumbnail {
	display: table;
	margin-left: auto; margin-right: auto;
	width: 256px; height: 160px; max-width: 100%;
}

div.screenshot-thumbnail > div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	margin-top: 0; margin-bottom: 0;
	width: 256px; height: 160px; max-width: 100%;
}

div.screenshot-thumbnail img.review-screenshot {
	display: block;
	margin-left: auto; margin-right: auto;
	width: auto; max-width: 100%; height: auto; max-height: 100%;
	object-fit: scale-down;
}

div.screenshot-thumbnail-container p {
	margin-top: 0.5em; margin-bottom: 0.5em;
	text-align: center;
}

div.screenshot-thumbnail-container p.review-title {
	margin-top: 0.5em; margin-bottom: 0;
}

div.screenshot-thumbnail-container p.publisher {
	margin-top: 0; margin-bottom: 0;
	white-space: wrap;
}

span.search-query {
	font-weight: bold;
}

div#no-search-results-found {
	display: table;
	margin: 0 auto;
}

div#no-search-results-found ul {
	margin-top: 1.4em; margin-bottom: 1.4em;
	text-align: justify;
}


/* Quotations */

blockquote {
	background-color: #242424;
	border-radius: 8px;
	display: table;
	margin: 1em auto;
	padding: 12px;
}

div.container blockquote {
	background-color: #383838;
}

cite {
	display: block;
	margin-top: 0.5em;
	text-align: right;
}

cite::before {
	content: '\2014\a0';
}


/* Browse reviews */

div.reviews-list-container {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	margin: 16px 0;
}

div.reviews-list-container:first-of-type {
	margin-top: 0;
}

div.reviews-list-container:last-of-type {
	margin-bottom: 0;
}

div.reviews-list-container > h2 {
	flex: none;
	font-size: 200%;
	margin: 0 12px 0 0;
	text-align: center;
	width: 1.75em;
}

div.reviews-list {
	background-color: #242424;
	border-radius: 12px;
	column-width: 240px;
	column-gap: 24px;
	column-rule: solid #404040 2px;
	flex: auto;
	padding: 12px;
}

div.reviews-list ul {
	list-style: none;
	margin-top: 0; margin-bottom: 0;
	padding-left: 0;
}

div.reviews-list ul li {
	margin-bottom: 0.25em;
	break-inside: avoid;
}

div.reviews-list ul li:last-of-type {
	margin-bottom: 0;
}

div.reviews-list span.rating {
	font-weight: bold;
}

/* Footer at bottom of page */

footer {
	background-color: #181818;
	font-size: 90%;
	margin-top: 16px;
	padding: 12px;
}

footer > div {
	display: table;
	border-collapse: collapse;
	width: 100%;
}

footer > div > div {
	display: table-row;
}

footer > div > div > div {
	display: table-cell;
	vertical-align: middle;
}

footer > div > div > div:nth-of-type(1) {
	padding-left: 0; padding-right: 6px;
	text-align: left;
}

footer > div > div > div:nth-of-type(2) {
	padding-left: 6px; padding-right: 0;
	text-align: right;
	white-space: nowrap;
	width: max-content;
}

address {
	font-style: normal;
}

footer img {
	vertical-align: middle;
}

img#e-mail-icon {
	margin-right: 3px;
}