:root {
  --bgcol: #073642;
  --prebgcol: #93a1a1;
  --pretextcol: #002b36;
  --textcol: #eee8d5;
  --alinkcol: #2aa198;
  --hlinkcol: #268bd2;
  --vlinkcol: #cb4b16;
  --font: Arial;
  --ctwidth: 45rem;
}

body {
  background: var(--bgcol);
  margin: 0;
}


/* Layout */
.header, .footer {
  color: var(--textcol);
  max-width: var(--ctwidth);
  text-align: center;
}

.main a, .footer a { color: var(--alinkcol); }
.main a:hover, .footer a:hover { color: var(--hlinkcol); }
.main a:visited, .footer a:visited { color: var(--vlinkcol); }

.main {
  color: var(--textcol);
  font: 1.2rem/1.3 var(--font);
  margin: 0 auto;
  max-width: var(--ctwidth);
}

.header { margin: 3rem auto; }

.header h1 { font: bold 2.4rem/1.2 var(--font); }
.header .logo {
  max-width: 4rem;
  max-height: 4rem;
  transition: 0.3s ease-in-out;
}
.header .logo:hover { transform: rotate(360deg); }

.footer {
  font: 0.8rem/1 var(--font);
  margin: 4rem auto 2rem;
}

.section { margin: 3rem 0; }
.section h1, h2, h3 { margin: 2rem 0 0.5rem; }
.section h1 { font: bold 1.8rem/1.2 var(--font); }
.section h2 { font: bold 1.4rem/1.2 var(--font); }
.section h3 { font: bold 1.3rem/1.2 var(--font); }
.section p { margin: 1rem 0; }
.section pre {
	background: var(--prebgcol);
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	font: 1.1rem/1.2 var(--font);
	color: var(--pretextcol);
	text-align: left;
}

.section table {
	font: bold var(--font);
	margin: 2rem auto;
	padding: 1rem 1rem 1rem;
	max-width: var(--ctwidth);
	border-spacing: 2rem 0;
	text-align: left;
}

/* Specific sections */
.error {
  margin: 2rem auto;
  max-width: var(--ctwidth);
}