:root {
  --color-white: white;
  --color-black: black;
  /* --color-blue: #038; */
  --color-red: #800;
  --color-grey: grey;
  --color-athens-grey: #f2f4f7;
  --color-light-grey: #ccc;
  --color-yellow: #fffbdd;
  --color-obs: #006951;
  --color-bg: #fff5d1;
  --color-low: #162dab;
  --color-high: #d11305;
}

header {
  max-width: 770px;
  margin: 0 auto;
  padding: 0em 2em;
}

main, .content {
  word-break: break-word;
  margin-bottom: 5%;
  padding: 2em;
}

body {
  margin: 40px auto;
  max-width: 770px;
  line-height: 1.4;
  color: var(--color-black);
  padding: 0 1em;
  font-size: 1.1em;
}

/* --- Code blocks --- */
pre, code { 
    font-size: 1.1em;
	font-family: monospace; 
	background-color: #F6F6F4; 
	color: #000; 
} 
code { color: #000; background: #EFC; }
pre { overflow-x: auto; padding: 1em; } 
pre code { color: #000; background-color: default; border: none; }

/* --- Table --- */
table { min-width: 100%; }
table, tbody, td, tr, th, colgroup, thead {
  border: 0;
  /*    padding: 0;*/
}
table {
  margin-top: 1em;
}
thead {
  border-bottom: 1px dashed black;
}
th {
  text-align: left;
  font-weight: 400;
  padding: 0;
  margin-bottom: 0.25em;
  padding-bottom: 0.25em;
}
td { padding: 0; }

tr:nth-child(even) {background: #f9f9f9;}
tr:nth-child(odd) {background: #ffffff;}
tbody {
  /* border-bottom: 1px solid black; */
}

/* dd { */
/*   margin-top: 0.25em; */
/*   margin-bottom: 0.50em; */
/* } */

/*
 * Really skinny views
 */
  @media only screen and (max-width: 600px) { .content { padding: 2em 1em; } }
  @media only screen and (max-width: 400px) { body { padding: 0; } }