* {
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
}

body > header > h1 {
  margin: 1em;
}
body > header > h1 > a {
  color: transparent;
  display: block;
  width: 465px;
  height: 117px;
  background: url('/img/zero-knowledge.png');
}

.entries {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
}
.entries > li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 1em;
}

body {
  background-image: url('/img/background.png');
}

@media screen and ((max-width: 750px) or (orientation: portait)) {
  .entries > li {
    width: 100%;
  }
}
@media screen and (min-width: 750px) and (orientation: landscape) {
  .entries > li {
    width: 49%;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .entries > li {
    width: 32%;
  }
}
@media screen and (min-width: 1450px) and (orientation: landscape) {
  .entries > li {
    width: 24%;
  }
}

nav.pagination > a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.5em;

  font-weight: bold;
  color: #ff9900;

  background-color: #3a5f78;
}
nav.pagination > a.deactivated {
  color: transparent;
}

article {
  display: flex;
  flex-direction: column;
}
article > header {
  order: 1;
}
article > nav {
  order: 4;
}
article > aside {
  order: 2;
}
article > section {
  order: 3;
}

article > header > h1, .entry > header > h1 {
  border-bottom: 0.1em solid #ff9900;
}
article > header > h1 > *, .entry > header > h1 > * {
  text-decoration: none;
  font-size: 1.25rem;
  color: #ff9900;
}

article > aside, .entry > aside {
  margin-bottom: 0.5em;
}
article > aside > *, .entry > aside > * {
  color: #3a5f78;
  font-weight: bold;
  font-size: 0.8rem;
}
article > aside > .author::before, .entry > aside > .author::before {
  content: 'by ';
}
article > aside > .date::before, .entry > aside > .date::before {
  content: 'on ';
}

article > section {
}

article > nav > a {
  font-size: 0.8rem;
  color: #3a5f78;
  font-weight: bold;
}
article > nav > .more::after {
  content: ' >';
}

body > .entry > header {
  margin-top: 2em;
}
.entry > header > h1, .entry > aside {
  padding-left: 1em;
}
.entry > section {
  margin: auto;
  max-width: 50rem;
  margin-bottom: 1em;
}
.entry > section h1, .entry > section h2 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 1.25rem;
  color: #3a5f78;
  border-bottom: 0.1em solid #3a5f78;
}
.entry > section pre {
  margin: 0.5em;
  padding: 0.5em;
  background-color: rgba(58, 95, 120, 0.3);
  overflow-x: auto;
}
.entry > section ul, .entry > section dl, .entry > section ol {
  margin: 0.5em;
  margin-left: 1.5em;
}