/* Global */

:root {

	/* Global colours */

	--color-white: #FFFFFF;
	--color-yellow: #FFCB08;
	--color-light-gray: #939598;
	--color-medium-gray: #87888B;
	--color-dark-gray: #7B7D80;
	--color-black: #000000;

	/* Global sizes */

	--unit: 18px;
	--font: 15px;
	--table-unit: 5px;
}

::selection {
	background-color: var(--color-dark-gray);
	color: var(--color-white);
}

:target {
	background-color: var(--color-dark-gray);
}

/* Grid */

#wrapper {
	margin: var(--unit);
	display: grid;
	gap: 0px;
	grid-template-areas:
		'. . . .'
		'. logo . .'
		'. menu content .'
		'. . footer .'
		'. . . .';
	grid-template-columns: auto calc(13 * var(--unit)) calc(32 * var(--unit)) auto;
	grid-template-rows: auto calc(10 * var(--unit)) auto calc(3 * var(--unit)) auto;
}

#logo {
	grid-area: logo;
}

#logo p {
	text-align: center;
}

#logo img {
	height: calc(8 * var(--unit));;
}

#menu {
	grid-area: menu;
}

#content {
	grid-area: content;
}

#footer {
	grid-area: footer;
}

#logo p a,
#heading p a {
	border-bottom: none;
}

#footer p {
	text-align: center;
}

/* Elements */

a {
	border-bottom: 1px dotted var(--color-yellow);
	color: var(--color-yellow);
	text-decoration: none;
}

body {
	background-color: var(--color-light-gray);
	color: var(--color-black);
	font-family: Helvetica, sans-serif;
	font-size: var(--font);
	line-height: var(--unit);
	margin: auto;
}

h3,
h4,
p,
ul {
	margin: var(--unit);
}

h3 {
	font-weight: bold;
}

h4 {
	font-style: italic;
}

ul li {
	list-style-type: disc;
	margin-left: 30px; /* Align with 2-digit OL numbers */
}

/* Specific pages */

img.page {
	border: 1px solid black;
	width: calc(30 * var(--unit));
}

p.page a {
	border-bottom: none;
}

/* Listing of covers */

div.listed_comic_cover img.cover.page {
	float: left;
	margin-right: var(--unit);
	width: calc(13.5 * var(--unit));
}