/* Big things first */
body
{
  background: #000000;
  color: lightgrey;
  font-family: sans-serif;
  margin: 0em;
  font-size: 18px;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
{
  display:block
}

p, li
{
  line-height: 1.65;
}

/* Make links nice and readable. */
a
{
 color: #4FC3F7;
}

/* Dark mode colours */

h1,h2,h3,h4,h5,h6
{
  color: white;
}

pre, code
{
  background: #1D3E53;
  overflow-x: scroll; /* Make code and pre blocks have a scroll bar to make it nicer on mobile */
}

blockquote
{
  background: #2f3640;
}

/* Index page archive list */

.blog-archive-list {
  padding-left: 0; 
}

.blog-archive-list li {
  list-style-type: none;
  margin-top: 1em;
  margin-bottom: 1em;
}

.blog-archive-list-item > p {
  margin-top: 0em;
  margin-bottom: 0em;
}

/* For Blog post tables */
table {
  margin-top: 2em;
  margin-bottom: 2em;
  border-style: solid;
}

td, th {
  padding: 1em;
  border: 1px solid;
}


/* All navigation items are horizontal, includes the language list */

header nav li, .lang li {
  display: inline;
  list-style-type: none;
}


/* Make the available-languages list for pages and posts look nice */
.lang {
  font-size: small;
  text-transform: uppercase;
  padding-left: 0;
}

/* Site Footer */

body > footer {
  padding: 1em;
  border-top-color: #f5f6fa;
  border-top-style: solid;
  border-top-width: 1px;
  text-align: center;

}

/* Make the article footers all shiny */
.post-footer {
  font-style: italic;
  font-size: small;
}

/* Make blockquotes readable, from https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
blockquote {
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}


/* Containers are neat */
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}