:root {
  --c0: #1f232b;
  --c1: #eeeeee;
  --c2: #8c8dff;
	--c4: #606984;
	--c5: #282c37;

	--base-font-size: 16px;
	--line-height: 1.5rem;
	--max-layout-width: 50rem;
}

* {
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
	font-size: var(--base-font-size);
	line-height: var(--line-height);
}

body {
	max-width: var(--max-layout-width);
	margin: 0;
	background-color: var(--c0);
	color: var(--c1);
}


/* begin: main grid */
body {
	display: grid;
	grid-template-columns: minmax(1rem, 8rem) auto minmax(1rem, 8rem);
	grid-template-rows: 2rem auto 1rem auto 1rem 4rem 2rem;
	grid-template-areas:
	 	". .       ."
		 ". header ."
	 	". .       ."
		 ". main   ."
	 	". .       ."
		 ". footer ."
	 	". .       .";
}

body > header {
	grid-area: header;
}

body > main {
	grid-area: main;
}


body > footer {
	grid-area: footer;
}

body > header > *:first-child {
	margin-top: 0;
}
body > main > *:first-child {
	margin-top: 0;
}
body > footer > *:first-child {
	margin-top: 0;
}

/* end: main grid */


/* begin: header */
body > header h1 {
	line-height: 2rem;
}

body > header h1 a {
	text-decoration: none;
	color: inherit;
}
body > header h1 a:hover {
	text-decoration: underline;
}

body > header p {
	color: var(--c4);
}
/* end: header */


/* begin: basic elements */

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

a:visited {
	color: var(--c4);
}

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

img {
	max-width: 100%;
}

hr {
	position: relative;
	width: 100%;
	height: var(--line-height);
	border: 0;
	margin: 0;
	text-align: center;
}

hr:after {
	content: "⊙";
	color: var(--c1);
}

p {
	text-align: justify;
}

/* end: basic elements */

/* begin tables */
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 5px 0;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

table tr:before {
	/* stretches table rows to a minimum height */
  width: 0px;
  content: '';
  float: left;
  overflow: hidden;
  height: var(--line-height);
}

tr th {
	text-align: left;
}

td, th {
	vertical-align: middle;
}

tr>td:last-child {
	text-align: right;
}

tr:nth-of-type(2n) {
	background-color: var(--c5);
}
/* end: tables */

img, video {
	border-radius: 2px;
}