/* Theme variables */
:root {
  /* Onyx */
  --theme-fg: #151515;

  /* Bone */
  --theme-bg: #e0ddcf;

  /* Sea green */
  --theme-accent: #5b8c5a;
}

* a {
  color: var(--theme-accent);
}

body {
  margin: 0px;
  font-family: "sans-serif";
  font-size: 14pt;
  background-color: var(--theme-bg);
  color: var(--theme-fg);
}

#wrapper {
  display: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
}

header {
  background-color: var(--theme-fg);
  width: 100%;
  min-height: 4em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  border: 
}

nav ul li a {
  font-weight: bold;
  text-decoration: none;
  padding: 0.4em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  border: 1px solid var(--theme-accent);
}

main {
  margin-top: 1em;
  padding: 2%;
  margin-bottom: 1em;
  height: 100%;
}

main blockquote {
  margin-top: 2em;
  margin-bottom: 2em;
  border: 1px solid var(--theme-fg);
  border-radius: 1em;
  padding: 1em;
}

main h1 {
  border-bottom: solid 2px var(--theme-fg);
}

main h2, h3, h4 {
  margin-top: 3em;
}

main p code {
  font-family: monospace;
  font-size: 75%;
  color: var(--theme-bg);
  background-color: var(--theme-fg);
  border-radius: 0.3em;
  padding: 0.3em;
  margin-left: 0.3em;
  margin-right: 0.3em;
}

main .post-item h2 {
  margin-top: 1em;
}

footer {
  background-color: var(--theme-fg);
  width: 100%;
  min-height: 4em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

footer p {
  color: var(--theme-bg);
}